Vue CLI 需要 Node.8.9 或更高版本。
输入npm install -g @vue/cli进行安装。
安装成功后输入vue --version检查是否正确。
安装成功vue cli后输入vue create 项目名来进行项目创建。
创建成功后输入npm run serve运行项目,复制网址浏览器输入出现以下页面即为成功。
vue cli中的路由。
使用npm install vue-router --save安装路由。
1、首先在components中创建基本Home和About的vue组件
2、引入安装好的路由,在src中创建router文件夹来存放路由
3、在router文件夹中创建index.js来配置路由,相当于路由的一个入口
4、写入以下代码
import Vue from ‘vue‘ import Router from ‘vue-router‘ import Home from ‘@/components/Home.vue‘ import About from ‘@/components/About.vue‘ Vue.use(Router) export default new Router({ routes: [ { path: ‘/home‘, component: Home }, { path: ‘/about‘, component: About }, { path: ‘/‘, redirect: ‘/home‘ } ] } )
routes配置中的每一项代表一条路由规则。
path是URL路径,可以定义路径参数(如“/product/:id”中的id);name是路由名称,用于引用;
component指定加载的组件名称。
5、在main.js中输入
import router fron ‘/router’
6、在new Vue中使用router
new Vue({ router, render: h => h(App) }).$mount(‘#app‘);
7、在app.vue中使用路由
<template> <div> <p>这是首页</p> <ul> <li> <router-link to="/Home">Home</router-link> </li> <li> <router-link to="/About">About</router-link> </li> </ul> <router-view></router-view>
</div>
</template>
以上,最基本的vue router就创建成功了。
二级路由明天再写。
原文:https://www.cnblogs.com/mian-18sui/p/13280154.html