vue-cli创建带router的项目，并且引入Element UI

首先强调，创建vue-cli项目的前提是必须要安装node.js文件，否则无法安装，vue的版本过高会有一些问题，比如在win7的系统无法运行vue3，亲测

第一步，找到你要创建项目的文件夹，按图示输入cmd

[图1]

第二步，输入命令，这里我们要创建的是个vue2的项目

vue create 项目名，这里起名不太规范，不过只是为了测试

然后按下回车

vue create vue2_test1_router

【图2】

随后会选择vue的版本，这里选择第二个的默认安装，随后按下回车等待即可

【图三】

安装完成后使用命令cd vue create vue2_test1_router进入文件夹内，再次使用npm install命令

【图4】

等待安装进度条走完，输入npm run serve运行后就可以查看vue2的欢迎界面了，网址是http://localhost:8080/

[图5]

接下来要开始进行路由配置，高版本的路由无法在vue2上面运行，会报错，所以直接安装路由的3.1.3版本命令如下

npm i [email protected] -S    //旧版本

手快已经安装了高版本路由的同学也没关系，可以使用如下命令进行卸载，再安装就可以了

npm uninstall vue-router -S  //卸载

【图6】

安装成功后就开始路由配置吧，并且开始做第一个路由案例，把项目中components文件夹下的HelloWorld.vue文件删除，清空App.vue原本写的内容倒也不用全删了，到下图这样就可以了

【图7】

在src文件夹下创建router文件夹，router文件夹下创建index.js文件，将下面的代码复制进去

import Vue from 'vue'

//对应你要跳转的组件

import Router from 'vue-router'

Vue.use(Router)

import ChildOne from '../components/childOne'

import ChildTwo from '../components/childTwo'

import ChildThree from '../components/childThree'

export default new Router({

    routes: [

      {

        path: '/one',

        name: 'ChildOne',

        component: ChildOne,

        children:[

          {

            path:'three',

            component:ChildThree,

          },

        ],

      },

      {

        path: '/two',

        name: 'ChildTwo',

        component: ChildTwo

      }

    ]

  })

随后打开main.js文件，将下列代码复制进去，把原有的代码进行覆盖

import Vue from 'vue'

import App from './App.vue'

import router from './router/index'

Vue.config.productionTip = false

Vue.use(router)

new Vue({

  el: '#app',

  render: h => h(App),

  router,

  components: { App },

  template: ''

}).$mount('#app')

---

然后在components文件夹下创建三个文件，

文件一，childOne.vue

【8】

文件二，childTwo.vue

【9】

文件三，childThree.vue

【10】

到这里已经成功了90%，还差最后一步，再在components文件夹内创建TestRouter.vue文件

代码如下

【11】

最后就是引入我们刚才写的那些了，打开app.vue文件，写下如下内容

【12】

---

路由的部分已经写完了，可以试着运行一下，其中包括路由嵌套，接下来是Element UI的环境配置

打开命令行窗口，输入命令npm i element-ui -S，回车，等待安装

在main.js文件中写下如下内容

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

【13】

这就已经导入完成了

开始写个案例测试一下，在components文件夹下创建TestElement.vue文件，写入如下代码：

【14】

接下来在app.vue中补充三条代码就可以运行了

    

import TestElement from './components/TestElement'

    TestElement（这里的上一行末尾加个逗号，不然报错）

【15】