1、Vue 项目初始化

使用 图形化界面方式 创建项目

启动项目

在插件这一栏安装 element 插件

在依赖这一栏安装 axios

在 src/plugins/element.js 文件中导入 element 样式

2、初始化 git 仓库

在本地使用 git status 查看本地文件状态

如果没有保存，使用 git add. 将代码上传到暂存区

使用 git commit xxx 将代码传到 git 仓库

在码云上创建 git 仓库，

根据已有仓库的命令，将本地的代码传到码云即可

3、Token

HTTP 是一种无状态协议

cookie -- 客户端维持服务器和客户端的会话机制

session -- 服务器维持服务器和客户端的会话机制

Token -- 服务器维持服务器和客户端的会话机制

如果前端和后台存在跨域，建议使用 Token 维持会话机制，否则使用 cookie、session

4、登录页面布局分析以及 分支操作

使用严谨的分支创建方式

首先基于 master 创建 develop 分支

git checkout -b develop

基于 develop 创建 feature 功能分支

git checkout -b feature/20200622-login

5、梳理项目结构

清空 App.vue 中的内容，只呈现一个基础结构

清空 router/index.js 中的内容，只呈现一个基础结构

将 components 以及 views 目录下的文件删除，不要删文件夹

6、创建登录组件并配置路由

在 views 目录下创建 Login.vue 登录页面组件

在组件中创建页面的基础结构

在 router/index.js 中配置路由

导入 Login.vue 登录页面组件

在 routes 中配置路由规则

设置重定向

7、绘制登录区域的盒子和登录区域

给 Login.vue 组件的跟组件设置类名 login-container

在 style 中写样式，会报错，

安装 less、less-loader 重启服务即可

在 assets 目录中 创建 styles 目录，然后创建 global.css 文件

将 global.css 文件在入口文件导入

在 Login.vue 的 style 中继续写登录框盒子的样式即可

8、登录区域头像

样式布局，步骤略

9、登录输入框和按钮

使用 element 给提供的组件实现布局

找到 from 表单组件，复制基础组件前面四行，到项目使用区域粘贴

在 element.js 中按需导入组件

根据登录的区域，复制三份 el-form-item, 实现基础布局

将最后一个 el-form-item 调整为按钮

进行样式布局

10、给输入框添加 icon

将素材中的 icon 图标库放到 assets 文件夹中

在入口文件 main.js 中导入字体图标的 css 文件

使用 element 给提供的 prefix-icon 属性添加类名

使用深度作用选择器 /deep/ 调整 icon 演示

11、表单数据绑定

查阅文档，得知使用 model 属性绑定数据，按照文档进行开发

给 el-form 绑定 model 属性，在 data 中声明绑定的数据对象 loginForm

在 loginForm 中声明需要绑定的 username 以及 password 数据

使用 v-model 绑定 loginForm 中的数据

12、表单验证

查阅文档得知，实现校验，如果给 form 表单绑定 rules属性

同时给 form-item 属性添加 prop 属性

给 form 表单绑定 rules属性，同时在 data 中声明校验规则字段

注意规则写法： rules 是一个对象，每一个校验规则是一个数组

给 form-item 属性添加 prop 属性，属性值为声明的校验字段

13、重置操作

查阅文档得知，实现重置可以使用组件给提供的 resetFields 方法

给 from 表单添加 ref 属性

点击重置按钮，使用 this.$refs 获取到组件实例

使用 this.$refs.loginFormRef 可以获取到 form 组件实例

然后使用 form 组件实例调用 resetFields 方法即可实现重置

14、表单预校验

当用户打开登录页面，直接点击登录，进行预校验

查阅文档得知，实现重置可以使用组件给提供的 validate 方法

给登录按钮绑定事件 login

在 methods 中定义 login 事件处理程序

在事件处理程序中，获取到表单引用对象 this.$refs.loginFormRef

然后调用 validate 方法，这个方法接收一个回调函数作为参数，回调

函数的参数接收一个值，是验证以后的结果

15、发起登录请求

在 main.js 文件中导入 axios，并 配置根域名，同时将 axios 挂载到原型上

在 Login.vue 的登录方法 login 中，发起请求

首先校验用户名和密码是否符合规范，如果不符合，结束代码运行

如果符合要求，则发起登录请求，获取后台返回的值

根据后台返回的值，做相应的判断处理即可

15、消息提示

按需导入 Message 组件，按照文档，将组件挂载到 Vue 的原型对象上

在需要使用组件的地方，使用 this.$message.xxx 即可实现调用

16、登录后的操作

将 Token 使用 sessionStorage 保存到本地

使用编程式导航实现路由的跳转

在 router.js 中配置路由

创建 Home.vue 页面组件，并初始化页面结构

17、退出功能

1、点击按钮，触发 logout 退出方法

2、在方法中，清空本地存储并实现页面的跳转

18、登录退出功能 git 操作

删除 fonts 目录下的 iconfont.js 文件

git status

git add .

git commit -m 登录和退出功能

git checkout develop

git merge xxx

git push

19、主页功能

根据设计稿分析页面主题布局

element 给提供了 container 布局容器，辅助实现布局

根据设计稿分析，那个常用的布局符合业务的需求，进行拷贝

导入布局容器组件并绑定

给布局容易设置样式即可

给 container 添加类名，并设置高度为 100%

20、头部区域布局

使用 flex 进行布局即可

21、侧边栏区域布局

使用 element 给提供的 NavMenu 导航菜单组件

复制组件到页面中

在 element.js 中导入并绑定组件

将组件调整成我们需要的格式

22、添加请求头

使用 element 给提供的 NavMenu 导航菜单组件

复制 axios 请求拦截器到 main.js 中，

注意，需要放到挂载到 vue 原型之前

在第一个函数中配置 Authorization 字段，值为本地的 token

22、获取左侧菜单数据

在 methods 中声明 getMenus 方法，用来获取左侧菜单数据

方法创建好后，在 created 中调用声明的方法

在方法内部，使用 axios 发起请求，

将获取到的数据赋值给 data 中的 menus 属性

23、渲染左侧菜单数据

使用双层 v-for 循环

注意： 给 index 绑定属性值需要是 string 字符型

24、更改图标

首先更改二级图标，替换为 el-icon-menu

一级的图标处理比较繁琐，需要我们自定义数据，经过分析，每次循环会

产生不同的分类 id，这时候，我们可以创建一个对象 iconsObj，

对象的键是分类的 id，只需要将键的值定义为 icon 图标的类名即可,

这样在每次循环的时候，可以根据 id 访问到对象中对应的 id，

从而获取到 icon 图标进行绑定

25、控制菜单的展开和折叠

布局三个竖线区域的样式

使用 element 给提供的 collapse 属性控制菜单是折叠还是展开

true 是展开，false 是折叠，

给控制按钮绑定事件，点击按钮以后，对 collapse 进行动态控制

需要在 data 中声明 isCollapse 属性

给 menu 添加 collapse-transition 属性去掉过渡动画

根据 isCollapse 属性动态设置 menu 的宽度

27、路由重定向

进入后台需要进入欢迎页面

定义 welcome 组件

在 router.js 中导入 welcome 组件

在 router.js 中 home 规则下配置子路由

配合重定向

在 Home.vue 中添加路由占位符

28、分类菜单改造

给 menu 组件添加 router 属性

动态绑定 router

29、用户功能分支创建

git status

git add .

git commit -m 主页功能

git checkout develop

git merge xxx

git log --oneline

git push

git checkout -b feature/20200206-user

30、展示用户列表组件

在 views 目录下创建 User --> Users.vue 用户列表组件

在组件中创建页面的基础结构

在 router.js 文件中导入组件，并配置子路由，展示用户组件

☆☆☆☆☆ 注意 @ 符号代表的是 src 目录

31、用户列表组件基础布局 1

使用 element 提供的组件实现功能

复制提供的面包屑导航 el-breadcrumb 实现页面内的导航布局

赋值提供的卡片组件 el-card 实现主体区域的布局

在全局调整样式

使用提供的 el-input 复合型组件实现搜索区域布局

使用提供的 Layout 布局实现宽度调整

使用 el-button 按钮组件实现添加按钮的布局

32、获取用户列表数据

在 methods 中创建 getUserList 方法，用来获取用户列表数据

在 created 中调用 getUserList 方法

在 data 中初始化请求参数 queryInfo

在 getUserList 方法根据接口文档发送请求

将后台返回的数据赋值给 data 中属性

33、渲染用户列表表格

使用 element 提供的 table 表格实现页面的渲染

给 table 绑定 data 属性，渲染数据

给 el-table-column 添加 label 属性渲染类名

给 el-table-column 添加 prop 属性渲染字段

给 el-table-column 添加 align 属性设置对其方式

34、分页功能

使用 element 提供的分页组件实现

将 el-pagination 分页组件拷贝到项目中，分析参数

将方法和参数进行声明或者配置

在 handleSizeChange 和 handleCurrentChange 处理业务逻辑

更改样式

35、更改状态

给 switch 绑定 change 事件，触发事件处理程序 userStatueChange

将当前用户的数据给事件处理程序

在事件处理程序中，发送 ajax 请求，将数据同步到服务器

如果更改成功，提升用户更新成功

如果没有更改成功，不让 switch 发生更改，并给用户错误的提示

36、添加用户

弹框使用 dialog 组件

37、添加用户布局

参考登录

37、自定义校验规则

参考文档

在 data 中声明函数创建自定义规则

注意：自定义规则需要写到 return 上方

将创建好的规则，在 addFormRules 对象中传递给 validator 属性

38、清空校验规则

给 dialog 组件绑定 close 关闭事件，触发事件处理程序 closeAddDialog

在事件处理程序中，获取到 addForm 的表单对象，调用 resetFields 方法

39. 添加用户

给添加按钮绑定事件 addUser

在事件中首先使用 validate 方法做预校验

在方法内部发起网络请求，将数据发送到服务器

根据返回的值，给用户提示

关闭弹框

40. 编辑用户弹框

参考添加用户

41. 获取到用户信息

可以使用 id 调用接口，也可以直接使用 scope.row 中的数据

给编辑按钮绑定事件，使用作用域插槽传递 id 给事件处理程序

在事件处理程序中，根据 id 发送网络请求

根据返回的状态值做判断

将返回的值赋值给 data 中的 editForm

42. 编辑用户所有的功能参考添加用户

功能、方法、验证等规则一致

43. 删除用户操作

给删除按钮绑定 click 事件，触发 removeUserById 函数，

并通过 scope.row.id 传递参数

点击后的弹框的使用的是 MessageBox 组件，首先需要把组件进行

导入并挂载到 Vue 的原型上，

注意：只需要挂载 confirm 这一个函数即可

this.$confirm 这个方法返回一个 promise 对象，

所以我们可以使用 await 以及 async 进行简化操作，

获取到返回值

点击取消以后，捕获不到错误，需要个 this.$confirm 方法绑定一个

catch 方法，返回 err 错误对象

同意删除返回 confirm，不删除返回 cancel

根据返回的值做相应的判断处理

43. 分支操作

git status

git add .

git commit -m 用户管理完成

git checkout develop

git merge xxx

git log --oneline

git push

git checkout -b feature/20200627-rights

44. 角色列表

实现基础布局

根据接口文档获取角色列表数据

根据状态码做提示或报错处理

45. 渲染权限列表

使用 layout 布局组件和 Tag 组件实现布局

使用三层 v-for 对数据进行渲染

46. 一级权限美化

css 布局，自己布局即可

47. 树行组件的使用

从 tree 组件中复制基础的结构

配置属性 data 为所需要展示的数据

配置属性 props 决定数据的展示格式

children: 配置需要展示的数据是通过哪个属性来实现父子嵌套的

label: 指的是需要渲染到页面中的数据是哪一个

48. 树行表格组件使用

安装包 npm i vue-table-with-tree-grid

在 main.js 文件中导入并挂载包

在页面组件中使用挂载的全局组件

必须给组件添加两个属性 data、columns