Vue笔记_04（element-ui和v-router）

1)vue-cli（vue脚手架）安装

2)element-ui安装(官方文档：Element - The world's most popular Vue UI framework)

npm install--save element-ui

3)element-ui使用

Vue.use(ElementUI);//全局注入

按需引入——减少项目打包后的体积

npm install babel-plugin-component -D

将 .babelrc (babel.config.js)修改为：

将原本引入element-ui所有组件改为按需引入

//import ElementUI from 'element-ui';

import {Row,Button} from 'element-ui';

//Vue.use(ElementUI);

Vue.use(Row)

Vue.use(Button)

打包指令：

npm run build

4)vue-router（官方文档：Vue Router）

下载指定版本vue-router

npm i vue-router@3.6.5

查看有哪些版本：进入npm官网，搜索vue-router

在src下面新建文件夹router，再创建index.js文件

（1）引入router（在index.js里）

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

（2）创建路由组件(在src下创建view目录，在view目录下，创建Home.vue以及User.vue)

 （3）将路由和组件映射（index.js）

 （4）将路由挂载到根节点上(main.js)

加入import router from'./router'

router，

 eslint报错，到vue.config.js添加lintOnSave: false//关闭eslint校验

 （5）路由出口，将匹配的路由渲染（在App.vue添加）

 <router-view></router-view>