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

缺乏、安全感 2021-10-01 09:16 275阅读 0赞

### 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中写`<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框架了