1.vue项目初始化
- 在cmd里面输入vue ui ,打开可视化,选择项目的存放路径 => 填写项目名称 => 填初始化git仓库信息 init project => 预设面板 可以使用原先保存好的,也可以手动创建 => 功能面板 选择安装哪些功能[ Babel . Router . Linter/Formatter . 使用配置文件 ] => 配置面板 关上第一条(是否使用历史模式的路由) , 第二项选择EsLint+Standard config(标准的配置文件) , 第三项选择 lint on save
- 安装 Element-UI组件库 选择可视化面板里面的插件 => 添加插件 vue-cli-plugin-element 目前版本是1.0.1 =>配置插件
- 配置axios 库 依赖 => 安装依赖 =>axios 0.18.0 运行依赖
登录界面
(1).渲染login组件并实现路由重定向
- 在compontents 里面新增Login.vue组件 => 在router.js里面导入Login组件
- 在APP根组件中放路由占位符
<router-view></router-view>
(2).设置背景色并在屏幕中央绘制登陆盒子
- 如果没有less-loader就在开发依赖里面安装 less-loader(4.1.0) & less(3.9.0) 再重新启动项目
- 在src的assets文件夹里面新建一个css文件夹=>global.css全局样式文件
- 在main.js里面要导入全局样式
- 页面背景色
- 中间的白色盒子/头像区域
- 登录表单区域
(3).配置axios发起登录请求
(4).路由导航首守卫
(5).实现退出
(6).eslink报分号和双引号错误解决方法
在src里面新建 .prettierrc文件
{ "semi":false, "singleQuote":true }
主页布局
(1.)axios 请求拦截 [接口要求 :需要授权的API 必须在请求头中使用 Authorization 字段提供的 token 令牌 ]
(2).文本间隔效果从||| 变成| | |
(3).渲染系统左侧菜单栏
效果高亮变成蓝色
<el-menu>
上有个属性active-text-color = “#CCC”
每次只展开一个菜单项,有个属性,看文档
菜单边框对不齐是因为有个灰色的边框线,去掉就行了
1.菜单的折叠展开功能
点击折叠,需要在el-menu上面绑定属性
在data里面定义isCollapse为false,再在事件中写取反
这时候折叠有个动画效果,在文档中el-menu有个关闭折叠动画的属性
动态改变侧边栏的宽
路由重定向 一登陆在Home页面中展示Welcome页面组件
1.在components中创建welcome页面组件
2.在router.js中去定义路由,
(4)实现侧边栏路由链接的改造
1.给el-menu加属性
2.把path作为路径,但是路由要加斜线
(5)点击用户列表展示用户列表组件
(6)侧边栏的激活状态(高亮蓝色)
在sessionStorage中保存左侧菜单的激活状态,刷新的时候从sessionStorage中取出来
在二级菜单中绑定一个点击事件,index的
保存链接的激活状态方法里面,同时还要给data里面的activePath赋值
在data中保存被激活状态
再在属性后面赋值保存的
初始化的时候调用
l