Vue.js Element UI+Mock 2020 电子商城后台管理项目实战视频教程

Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计，容易上手和学习。Vue 的核心库只关注视图层，简单小巧的核心

库，渐进式技术栈，但足以应付任何规模的企业级应用（现在非常多的大企业也用 vue框架进行前端开发），而且非常容易与其它库或已有项目整合。

Element-UI 是饿了么前端团队推出的一款基于 Vuejs 框架的 PC 端 UI 框架。

本教程将通过一个网站管理后台（包括登陆和用户管理模块）,让大家直观了解Vue+ElementUI 组合开发实现过程，并在实际操作中逐步学习 vue 编程模式的一些重

要知识点及开发技巧。

课程目录

第一章，课程介绍及示例演示

1 课程介绍及示例演示

第二章，用户登陆功能模块实现

1 用 vue ui 方式初始化 Vue 项目

2 用 cmd 指令方式初始化 vue 项目

3 将本地项目上传到码云-添加 SSH 公钥

4 本地项目上传到码云中-创建仓库

5 后端配置-Mockjs 模拟服务器并返回数据

6 用 mock 和 axois 来实现一个简单的登陆功能

7 删除不必要的组件导入 elementUI

8 创建登陆组件,样式及布局 1

9 创建登陆组件,样式及布局 2

10 创建登陆组件,样式及布局 3

11 登陆表单数据绑定和验证

12 表单重置和登陆前的预验证

13 登陆请求及登陆成功后的行为

14 路由导航守卫控制访问权限及退出功能

15 项目优化及提交登录功能代码到码云

第三章，用户管理功能模块实现

1 用户列表 主页 home 布局开始

2 主页 Header 和左侧菜单布局

3 左侧菜单接口实现及数据绑定

4 左侧菜单 UI 美化

5 左侧菜单的折叠与展开功能

6 实现首页路由的重定向和菜单绑定路由链接

7 用户列表功能优化

8 绘制用户列表的基本 UI 结构

9 获取用户列表分页数据

10 用户列表渲染及数据绑定

11 改造状态列的布尔值显示效果

12 用户列表添加按钮和实现分页功能

13 实现用户状态的修改和模拟数据接口

14 实现用户信息搜索过虑的功能

15 创建添加用户对话框和表单

16 添加用户时表单验证和自定义验证规则

17 用 Mockjs 模拟添加用户的接口

18 在客户端添加处理添加用户接口的方法

19 用户列表信息修改功能-接口实现

20 用户列表信息修改-前端功能实现

21 删除用户的操作-确认是否删除消息框完成

22 删除用户的操作功能完成

23 提交用户列表功能代码远程管理至码云