项目中使用element-ui库

中文网

https://element.eleme.cn/#/zh-CN

安装命令

npm install  element-ui

安装按需加载babel插件

npm install babel-plugin-component -D

npm i //可以通过npm i 的指令让配置刷新重新配置一下

项目中使用element-ui组件

抽离文件中按需使用element ui （在components下创建一个element文件夹，在文件夹创建index.js文件,elementui按需使用都在这写↓）

下方↓是验证Vue.use 为什么和Vue.component 一致

//这些代码是验证Vue.use 为什么和Vue.component 一致
Vue.component(Button.name,Button);Vue.use(Button);export default {install(VM){VM.component(Button.name,Button);}
}//Vue.use 为什么和Vue.component 一致 ，因为Vue.use的底层就是Vue.component

在main.js文件中引入上方的index.js文件

关联message 弹框 全局方案，因为要用到所以要在之前的elementui下的index.js中配置，像带$的这样配置。

import { Button, Input, Form, FormItem, Message } from "element-ui";//设置全局变量
Vue.prototype.$message = Message;

组件中使用this.$message使用

 //登录失败this.$message.error(res.msg);

表单上添加验证规则 实现验证成功 在登录

vue组件中使用ref属性  $refs 获取元素节点
//vue组件中获取dom元素节点的api  需要在获取的dom元素节点上添加 ref属性名称自定义
console.log(this.$refs.ruleForm);

vue中获取dom节点的方法↓

布局admin界面（给admin组件布局用的是elelmentui的布局方式，还要调整一些样式。）

给APP.vue配置样式，这个是总组件样式如下↓

给admin自己的样式↓

admin.vue中的代码↓

配置静态的系统菜单（在admin.vue中）

选项1选项2

完成项目中静态的二级子路由和根据不同用户获取动态菜单

静态路由配置（在router下的routes.js文件中配置↓）

用户登录系统之后，在进入系统之前在守卫中获取系统菜单数据 进行动态路由的添加（在router下的index.js文件中）

定义获取菜单的接口（在network下的user.js中）

//获取用户菜单
export const userMenu=()=>{return get("/sys/menu/nav");
}

在守卫中对应的位置执行ajax获取菜单数据（在router下的index.js文件中）

 if (!menu) {//ajax 获取数据let menu=await userMenu();console.log(menu);}

测试获取的menu数据（通过浏览器的开发者模式查看是否用到，发现需要令牌↓）

接口需要令牌认证↓。

在axios请求拦截器中设置添加token令牌认证接口（在router下的requset.js文件中），

给当前接口设置时间戳——在请求拦截器中设置（在router下的requset.js文件中），