龙元建设网站,杭州系统vi设计,网站建设胡菘,营销型网站测评方法项目中使用element-ui库中文网https://element.eleme.cn/#/zh-CN安装命令npm install element-ui安装按需加载babel插件npm install babel-plugin-component -Dnpm 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中的代码↓templatediv classadmin_flexedel-containerel-aside width200pxdiv classadmin-logo蜗牛社交论坛/div!-- 导航菜单 --div classadmin-menuel-menudefault-active2classel-menu-vertical-demobackground-color#545c64text-color#fffactive-text-color#ffd04bel-submenu index1 template slottitlei classel-icon-location/ispan 首页/span/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-submenu/el-menu/div/el-asideel-containerel-headerHeader/el-headerel-main!-- 系统主界面二级出口 --router-view/router-view/el-main/el-container/el-container/div
/template
配置静态的系统菜单在admin.vue中el-menudefault-active2classel-menu-vertical-demobackground-color#545c64text-color#fffactive-text-color#ffd04bel-submenu index1template slottitlei classel-icon-location/ispan导航一/span/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-submenu/el-menu完成项目中静态的二级子路由和根据不同用户获取动态菜单静态路由配置在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 menuawait userMenu();console.log(menu);}测试获取的menu数据通过浏览器的开发者模式查看是否用到发现需要令牌↓接口需要令牌认证↓。在axios请求拦截器中设置添加token令牌认证接口在router下的requset.js文件中给当前接口设置时间戳——在请求拦截器中设置在router下的requset.js文件中
