1.el安装
官网地址
Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
https://element.eleme.cn/#/zh-CN 安装
npm install element-ui -S引入组件（在 main.js）中
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)测试
<el-button>我是按钮</el-button>2.表格el-table
代码示例
<template><div><el-table :data="students" stripe style="width: 100%"><el-table-column prop="id" label="学号" width="180"> </el-table-column><el-table-column prop="name" label="姓名" width="180"> </el-table-column><el-table-column prop="age" label="年龄" width="180"> </el-table-column><el-table-column prop="gender" label="性别" width="180"> </el-table-column></el-table></div>
</template><script>
import axios from "axios";
const options = {data() {return {students: [],};},methods: {async sendReq() {const resp = await axios.get("/api/student");console.log(resp.data);this.students = resp.data;},},mounted() {this.sendReq();},
};export default options;
</script><style scoped></style>3.分页el-pagination
代码示例
<template><div><el-table :data="students" stripe style="width: 100%"><el-table-column prop="id" label="学号" width="180"> </el-table-column><el-table-column prop="name" label="姓名" width="180"> </el-table-column><el-table-column prop="age" label="年龄" width="180"> </el-table-column><el-table-column prop="gender" label="性别" width="180"></el-table-column></el-table><el-paginationbackground:total="total":page-size="queryDto.size":current-page="queryDto.page":page-sizes="[3, 5, 10, 20]"@size-change="sizeChange"@current-change="currentChange"layout="prev, pager, next, sizes, jumper,total"></el-pagination></div>
</template><script>
import axios from "axios";
const options = {data() {return {students: [],total: 0,queryDto: {page: 1,size: 3,}};},methods: {async sendReq() {const resp = await axios.get("/api/student");console.log(resp.data.students);console.log(resp.data.total);this.students = resp.data.students;this.total = resp.data.total;},async sizeChange(size) {this.queryDto.size = size;this.sendReq()},async currentChange(page) {this.queryDto.page = page;this.sendReq()}},mounted() {this.sendReq();},
};export default options;
</script><style scoped>
</style>4.搜索el-search
<template><div><el-inputv-model="queryDto.name"placeholder="请输入内容"width="30px"></el-input><el-select v-model="queryDto.gender" placeholder="请选择"><el-option value="男"> </el-option><el-option value="女"> </el-option></el-select><el-table :data="students" stripe style="width: 100%"><el-table-column prop="id" label="学号" width="180"> </el-table-column><el-table-column prop="name" label="姓名" width="180"> </el-table-column><el-table-column prop="age" label="年龄" width="180"> </el-table-column><el-table-column prop="gender" label="性别" width="180"></el-table-column></el-table><el-button type="primary" @click="sendReq()">查询</el-button><el-paginationbackground:total="total":page-size="queryDto.size":current-page="queryDto.page":page-sizes="[3, 5, 10, 20]"@size-change="sizeChange"@current-change="currentChange"layout="prev, pager, next, sizes, jumper,total"></el-pagination></div>
</template><script>
import axios from "axios";
const options = {data() {return {students: [],total: 0,queryDto: {name: "",gender: "",page: 1,size: 3,},};},methods: {async sendReq() {const resp = await axios.get("/api/student");console.log(resp.data.students);console.log(resp.data.total);this.students = resp.data.students;this.total = resp.data.total;},async sizeChange(size) {this.queryDto.size = size;this.sendReq();},async currentChange(page) {this.queryDto.page = page;this.sendReq();},},mounted() {this.sendReq();},
};export default options;
</script><style scoped>
.el-input {width: 200px;margin-right: 10px;
}
</style>
5.级联展示el-cascader
示例
假设数据结构如下：
-
省份 -> 城市 -> 区县
后台代码示例
public class CascadingData {private String label;private String value;private List<CascadingData> children;// Constructors, Getters, and Setters
}@RestController
@RequestMapping("/api/cascading")
public class CascadingController {@GetMapping("/data")public List<CascadingData> getCascadingData() {List<CascadingData> provinces = new ArrayList<>();// 示例数据CascadingData province = new CascadingData("Province1", "province1", new ArrayList<>());CascadingData city = new CascadingData("City1", "city1", new ArrayList<>());city.getChildren().add(new CascadingData("County1", "county1", null));province.getChildren().add(city);provinces.add(province);return provinces;}
}前端代码示例
<template><div><el-cascaderv-model="selectedValue":options="cascadingOptions"placeholder="请选择"/></div>
</template><script>
import axios from 'axios';export default {data() {return {cascadingOptions: [],selectedValue: null,};},mounted() {this.fetchCascadingData();},methods: {fetchCascadingData() {axios.get('/api/cascading/data').then(response => {this.cascadingOptions = response.data;});}}
};
</script>
6.router-路由配置
vue属于单页面应用，所谓的路由，就是根据浏览器路径不同，用不同的视图组件替换这个页面内容。
使用示例
先建立三个要跳转的页面视图
在根组件视图，添加路由跳转标签
在路由的index.js中配置跳转规则
这样就可以通过访问不同的路径，跳转不同的页面视图
7.router-动态导入
当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效。
代码示例
8.router-嵌套路由
在一个页面中，有多个子页面
示例
9.router-路由跳转
Main区域的视图可以根据路由进行跳转展示
代码示例
<template><div><el-container><el-header>这是页面头部导航栏</el-header><el-container><el-aside width="200px"><router-link to="/c1">C1页面</router-link><br><router-link to="/c2">C2页面</router-link><br><router-link to="/c3">C3页面</router-link><br></el-aside><el-main><router-view></router-view></el-main></el-container></el-container></div>
</template>10.router-导航菜单
通过点击导航菜单，在Main区域进行不同页面间的切换
<template><div><el-container><el-header>这是页面头部导航栏</el-header><el-container><el-aside width="200px"><el-menudefault-active="2"class="el-menu-vertical-demo"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"router><el-menu-item index="/c1"><i class="el-icon-menu"></i><span slot="title">导航一</span></el-menu-item><el-menu-item index="/c2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-menu-item index="/c3"><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item></el-menu></el-aside><el-main><router-view></router-view></el-main></el-container></el-container></div>
</template>11.router-动态路由
不同的用户登录，后台根据用户的角色返回这个用户能够访问的菜单信息。
思路，用户登录之后，后台返回该用户能够访问的菜单地址，前端接收到响应数据之后，通过 this.$router.addRoute()方法，将返回的路由挂载到指定的父路由上。
12.router-重置路由
上面的代码会有个问题，就是你切换路由的时候，不会恢复成初始状态，如果先是管理员登录，那么后面所有的用户登录都是和管理员一样拥有全部的路由权限。
解决方式，在每次登录之前先重置路由，然后再去访问后端，获取现在登录用户的访问权限。
# 在路由管理视图中添加
export function resetRouter() {router.matcher = new VueRouter({routes}).matcher
}13.router-页面刷新
用户登录之后，不注销，但是如果刷新了页面，权限菜单就会丢失，需要重新向后台发起请求。
解决方法，登录之后，将用户的权限菜单信息放入到 sessionStorage 中，只有在关闭标签页中，信息才会被清除。
存入
取出
14.响应式数据共享 - vuex
这种取数据的方式我们可以进一步优化，放在同一个页面多个地方使用到这个值。
通过计算属性
但是这样写，还有一个问题，就是如果属性值很多（name, age, sex......），那么计算属性里面就要写很多的重复代码。
解决方法，vuex提供了mapState方法
取数据的时候 vuex 做了优化，存数据的时候同样 vuex 也做了优化。
使用 mapMutations 的时候有一个问题，就是在其中不能包含异步操作，如请求后台数据，会造成开发工具不准确。
如果是想通过请求后台获得响应数据之后存入 store 中，需要经过 mapAction 转发一层。
mapActions 调用
总结，能立刻获取到的数据使用 mapMutations ，不是立刻获取到的数据使用 mapActions。
