目录
前端笔记 1
一、 vue项目搭建 1
二、 安转element-ui 1
前端笔记
一、vue项目搭建
使用vue ui完成项目搭建（选vue2）
二、安转element-ui
安装axios
安装qs
安装mock.js
安装动态粒子样式
编辑登录页
欢迎使用宝贝后台管理系统
验证码的设计
Mock的使用
（1）安装mock
（2）创建mock.js 文件
const Mock =require('mockjs')const Random = Mock.Random
let Result = {
code: 200,
msg: '操作成功',
data: null
}
Mock.mock('/captchaImg','get',() =>{
Result.data= {
randomCode: Random.string(32),
captchaImg: Random.dataImage('125x55', 'b7npm')
}
return Result
})
（3）main.js中引入
（4）到这就可以用了
getCaptchaImg(){
this.$axios.get('/captchaImg').then(res => {
console.log('captchaImg:'+res)
console.log(res.data.data.randomCode)
console.log(res.data.data.captchaImg)
this.loginForm.randomCode= res.data.data.randomCode
this.captchaImg=res.data.data.captchaImg
})
}
三、写axios.js用于请求拦截
这块不写上网查吧
四、写动态路由
1.这是将菜单栏按循环的数据格式设计好的代码
首页 {{menu.title}} {{ item.title }}
五、让路由与菜单的数量保持一致
这个路由问题我提供两个解决方案：
1、全部写死，也就是提前写好所有的路由，不管用户有没有权限，后面在通过权限数据来判断用户是否有权限访问路由。
2、动态渲染，就是把加载到的导航菜单数据动态绑定路由
这里我们使用第二种解决方案，这类简单点，后续我们再开发页面的时候就不需要去改动路由，可以动态绑定。
综上，我们把加载菜单数据这个动作放在router.js中。Router有个前缀拦截，就是在路由到页面之前我们可以做一些判断或者加载数据。
动态路由的解决方案
在router.js编写下方全局前置守卫 方法
router.beforeEach((to, from, next) => {
...
})
六、状态管理的使用
新建modules文件夹
创建menu.js之后在index.js中引入
调用模块中的state中的值
vue中Actions的使用
vue中getters的使用
调用
生成动态路由与菜单的思路：
（1）首先去index中创建全局前置守卫（router.beforeEach方法）
（2）调用后台接口返回用于动态生成路由与菜单的数据
（3）将数据存到vuex中，之后去菜单栏组件中循环遍历生成菜单栏
（4）将数据在全局守为中转为想要的路由再将路由添加到路由管理中
（5）完善功能，就是路由加载过了在刷新时就不在加载了
（6）需要在vuex中添加hasRoute标志进而判断是否要加载路由
标签页与菜单动态绑定
（1）将首页对应的标签页的数据放到vuex中，将当前激活的标签也放入vuex中，再在Tabs组件中引用值。
（2）当点击左侧菜单时就会触发标签页的添加，
（3）在添加时先判断是否已经加过标签了加过的话就不重新加了，直接跳转就好了
（4）点击退出时要初始化标签页