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.vuehome.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中写<router-view/>
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框架了

推荐阅读更多精彩内容