2021-03-22

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