vue cli3 搭建项目 使用vue-router 以及 element-ui

vue cli3 搭建项目 使用vue-router 以及 element-ui

搭建vue项目，（node和git 首先要下载）
1.首先根据vue官网 Cli的说明，快速搭建。
cli3上的命令应该是: vue create 项目名称（之后可以一路回车） npm run serve 将项目跑起来。
2.vscode打开项目，可以看到目录，首先在src下创建views文件夹，在里面继续创建两个文件夹，
分别是login和comment（个人习惯）,在这两个文件夹中新建文件，login.vue和home.vue(也是个人习惯)。
3.vue项目中使用了vue-router，所以请在控制台上下载，（命令是：npm i vue-router）,接着在src下
继续创建router文件夹，文件夹中创建文件，router_index,js用来写路由。具体的代码是：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import index from '../App.vue'
import Login from '../views/login/login.vue'
export default new Router({
  routes:[{
    path: '/',
    name: 'index',
    component: index,
    children:[{
      path: '',
      name: 'login',
      component: Login
    }]
  }]
})

4.将router_index引入到main.js中

import router from './router/router_index'
new Vue({
  router,   //将router开放出去
  render: h => h(App),
}).$mount('#app')

5.将App.vue中的示例代码删掉，在div中写
6.login.vue中写模板，（spa第一个吧应该是，回车就可以），div中写点东西测试！
7.如果项目中使用的是element-ui，首先安装npm i element-ui
安装完成以后，在main.js文件中引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

之后就可以在项目中使用这个ui框架了