Vue.js 3.0企业级管理后台开发实战：基于Element Plus UI

• 前言
• • 本书内容
  • 项目源码及课件
• 第1章 项目启动
• • 1.1 项目原型
  • 1.2 项目UI
  • 1.3 项目开发流程
  • 小结
• 第2章 项目构建
• • 2.1 Node.js
  • 2.2 开发工具
  • 2.3 脚手架安装
  • 2.4 项目创建
  • • 2.4.1 命令构建项目
    • 2.4.2 可视化构建项目
  • 2.5 项目仓库
  • • 2.5.1 申请仓库
    • 2.5.2 推送项目
  • 2.6 项目分支
  • • 2.6.1 分支命名
    • 2.6.2 分支管理
    • 2.6.3 分支创建
  • 小结
• 第3章 初始项目
• 第4章 Vue3的变化
• 第5章 登录注册业务需求
• 第6章 管理后台搭建
• 第7章 VUEX状态管理
• 第8章 路由守卫
• 第9章 信息管理模块
• 第10章 组件化
• 第11章 系统配置
• 第12章 权限功能
• 第13章 项目部署

前言

随科技的发展，技术的变革，互联网飞速发展的信息时代，Web开发技术的更新迭代也在加快。从最初的HTML静态页面到混合开发再到MVC时代，从MVC时代到Ajax的前后端协作开发再到今天的前后端分离开发都是层出不穷的新技术。

Vue.js 是前后端分离开发的技术之一，Vue是一套构建用户界面的渐进式框架，它是以数据驱动视图和组件化的思想构建的，采用自底向上增量开发的设计，其核心库只关注视图层，同时Vue完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。Vue 从2013年的实验阶段到2015的V1.0版本再到2016年的V2.0版本再到最新的V3.0版本，时至今日，已成为世界上三大主流前端框架之一，github 拥有的Star领先于 React 和 Angular。Vue.js有完善的中文文档、中文社区、易学易上手，在国内是主流技术之一。为了能够让刚进入前端的爱好者更快的掌握Vue3的技术，笔者将以“基础篇”和“进队篇”两个部分内容结合企业中是常见的管理后台进行Vue3技术的实战演练，通过管理系统的业务模块结合Vue技术讲解企业内部的开发过程以及项目文件的解读，读者将通过本书的项目熟悉掌握运用Vue.js技术的快速应用，并可完全自主搭建后台管理系统。

本书内容

本书共13章，各章简介如下。
第1章“项目启动”：讲述了新项目启动起时会拿到哪些和项目有关的资料，如项目原型和界面UI，通过这些资料可以清楚了解项目的业务逻辑和具体要开发的功能以及要呈现给用户的界面效果和交互效果。此外，还讨论了项目开发过程的原型评审、测试用例评审、UI评审等事项，这些都是公司内部开发项目的常规流程。

第2章“项目构建”：介绍了如何通过脚手架工具的命令和可视化两种方式快速的构建项目，以及团队协作的代码仓库管理和项目开发过程的分支管理。

第3章“初始项目”：讲解了Vue项目的运行入口和项目的文件结构分布，并且在开发项目前通过初始化项目依赖第三方UI包、清除浏览器默认样式等动作提高工作开发效率。

第4章“Vue3的变化”：这章主要是介绍了Vue3的一些新的API特性、Vue2和Vue3生命周期的区别和新的声明对象语法，通过这章的了解对后续的开发更为顺畅。

第5章“登录注册需求”：进述了项目其中一个模块的业务开发，通过该模块的需求一步步了解Element Plus UI组件的使用方式和Vue指令的用法，并且在开发过程中一步步了解前端如何与后端对接数据，以什么方式对接，并了解API接口文档的使用、API接口联调、测试工程师的测试用例理解等。此外，还介绍了如何根据UI实现交互动作以及根据项目原型实现业务需求。

第6章“管理后台搭建”：介绍了管理后台整体的结构由哪几部分组件，通过拆解的几个部分组合成管理后台，并有也介绍了如何通过“静态路由”实现菜单的渲染以及菜单图标的开发方式。

第7章“VUEX状态管理”：讲述了VUEX在Vue项目的具体作用，如何通过VUEX实现项目全局的数据应用，并且通过VUEX实现管理后台菜单的“展开/收起”效果。

第8章“路由守卫”：介绍了路由守卫在管理后台起到了什么作用，以及在开发路由守卫过程中遇到的各种逻辑和问题解决方式。

第9章“信息管理模块”：讲述了独立模块结合第三方UI的开发过程，同时结合项目原型和项目UI，以及更多的API接口联调，可更深一步熟悉业务的整体开发过程。

第10章“组件化”：介绍了组件二次封装的核心和组件封装的整体过程，以及为什么要二次封装组件和封装的组件能为项目带来什么。

第11章“系统配置”：讲述了如何通过“角色”桥接“用户”达到用户的权限分配。并且通过二次封装的组件实操性的完成“菜单管理”、“角色管理”、“用户管理”三个模块的开发，体验传统开发方式和组件开发方式的区别。

第12章“权限功能”：第12章“权限功能”介绍了如何通过读取用户的权限以“动态路由”的方式渲染管理后台的菜单以及“自定义指令”现实页面元素级的控制。

第13章“项目部署”：讲述了项目打包的优化，如何使项目体积变小，提高项目加载速度，并且也简单介绍如何部署到服务器访问开发完成的项目。

项目源码及课件

文章学习思维导航，务必了解哦：https://www.processon.com/view/link/61b215f65653bb4461f8d598
“手把手撸码前端”官网下载和本书相关的所有课件资料，包括所有章节的文档、UI稿件、原型图以及项目源码等，官网地址：http://www.web-jshtml.cn。
了解更多课程视频，可关注UP主：https://space.bilibili.com/431551452。
学习思维导图：https://www.processon.com/view/link/61b215f65653bb4461f8d598；

第1章 项目启动

项目启动，意味着新项目的开始或是现有项目下一个阶段的变化。项目启动阶段所准备的材料是否充足、目标是否明确、制定的计划是否合理等因素往往决定了项目的质量和成败，无论开发什么样的项目都要遵从严格、成熟的开发过程才会有高质量的项目产出。

一般情况下，项目会有：项目需求、UI设计、代码编程、代码审核、项目测试、项目发布、复盘等阶段。项目的每个阶段要达成的目标、制定的计划、人员之间的沟通都会影响到项目的开发进展，所以在项目开发过程中要确保所有人的信息是“对称”的，清楚的知道大家在不同阶段的进展才能更好更快更有质量的使项目完整落地，否则都会影响项目的最终结果。

1.1 项目原型

原型是经过“项目需求”收集后由产品经理将需求点“具象化”出来的可视化演示系统，起到展示和分析的作用，也称为“项目原型”。项目原型可以是静态的HTML页面，也可以是UI稿件的插图，在国内用的比较多的原型工具有Axure、墨刀等。

本书所介绍的“管理后台”项目原型文件可查看课件的“Vue3.0+ElemenPlus企业级管理后台原型”或是访问作者个人网站查看，也可以访问以下网址：https://lanhuapp.com/url/OxnLy，如图1-1所示。

原型除了演示项目外，也具备了业务逻辑分析、业务交互的呈现以及非常重要的需求文档（PRD）。需求文档和项目原型是不可分割的，原型是呈现项目所使用的元素以及交互是什么，需求文档则是描述模块元素和业务之间的逻辑关系是什么，开发人员通过需求文档的说明便能很清楚的知道原型所呈现的元素具体会有什么样的逻辑和交互以及大部分的业务需求。

1.2 项目UI

项目UI是建立在项目原型的基础上由UI设计师设计出来的视觉规范。UI全称是User Interface，即：用户界面。UI设计也称为用户界面设计，是指UI设计师根据“项目原型”和“需求文档”两者呈现的元素和业务逻辑关系设计的人机交互、操作逻辑、界面美观等视觉效果。如：界面设计、结构设计、颜色规范、按钮效果、图标元素等视觉，本书所介绍的“管理后台”项目UI文件可查看课件的“UI稿件”或访问作者个人网站查看，如图1-2所示。

1.3 项目开发流程

项目从启动到落地的过程会经历很多部门的人员参与，参与项目的所有人是“环环相扣”的，脱离任何一个环节都会影响到项目的开发进度。无论项目的大小基本上都会有一个流程，下面来了解一下项目的开发过程中可能会涉及到的部门会有哪些，如图1-3所示。

1. 原型评审
   项目立项后产品经理会规划出项目的原型、需求文档、业务逻辑、流程、交互等各方面的文件，接着就是原型的评审，一般都会有产品经理、研发部、UI设计师等人参与，如图1-3的①标记。产品经理会讲解项目原型的业务逻辑、流程、交互等，研发部人员需要根据产品经理讲述的内容进行业务逻辑、程序逻辑、数据库、服务器等问题考虑。会议过程中肯定会有一些问题，如果遇到有疑问的位置可以随时提出，也可以先记录下来，等产品经理发问时便可提出问题或是建议等。评审过程中有疑问就问，或是有更好的方案都可以提出，只有把东西弄明白了才能更好的去开发业务逻辑。
   当然了，一轮评审会议下来肯定是会有问题的，毕竟一个人所思考的事情还是有一定局限性，很多人一起想就不一样了，有不合理的地方就要修改。②标记处的“有意见”，就是在第一轮的原型评审后大家提出的问题，产品经理就要对需求做修改，改完后再进行第二轮的评审，一直反复的进行这个环节，一般情况在第二轮或第三轮就可以把需求理清楚，最终也确定出第一期要开发哪些功能，便会进入到下一个环节，也就是③、④、⑤标记处。
2. 测试工程师、UI设计师、研发部
   原型评审通过后便进入项目的初期开发阶段，也就是③、④、⑤标记处的同事会同步进行各自的开发任务。
   ● 测试工程师 ③：负责测试用例的编写。除了测试用例外也需要进行测试计划、冒烟测试、测试界面、接口测试、自动化测试等工作的准备；测试用例是写给研发人员看的，会很详情的体现出操作过程中需要程序去做些什么事情，研发人员根据测试用例的步骤以及业务逻辑来开发便可。测试用例也是需要评审的，也就是评审整体过程的逻辑、交互等是否合理，结果和“原型评审”一样，如果有意见可以提出，会议结束就修改，改完后再次评审直至通过为止。
   ● UI设计师 ④：负责产品的界面UI设计，也是直接面向于用户的。UI基本上是评审色调、元素、交互、操作体验等各方面，评审过程中同样也是可以提出问题和建议，之后也是修改，修改完成后再进行评审直至通过为止。
   ● 研发部 ⑤：一般有“前端”、“后端”等同事，研发部这边会自己在部门内部讨论技术选型，例如前端确定用Vue.js来开发还是其他的技术，后端是采用Java还是go还是其他语言以及数据库、服务器等，确定了技术选型后，前端、后端就要开始搭建基础的东西。
3. 开发阶段
   开发阶段也差不多有了“测试用例”、“接口”等资料，前端可以跟着“测试用例”来处理逻辑的事，同时和后端对接接口的联调，除了这些之外还需要多看“产品原型”，根据原型的业务逻辑、交互等开发业务需求，同时也要看UI效果图，也是确定界面元素及交互是否和UI效果图一致。
   前端和后端的开发工作是紧密的，缺了谁都无法顺利完成项目的开发，所以沟通很重要。当项目的需求都开发完了，就是将项目部署到“测试服务器”，服务器一般都会由“运维”的同事提前准备好，前端和后端只需要将项目打包部署到服务器便可通过域名或IP访问项目。
4. 项目测试
   项目测试是测试工程师对开发好的项目进行验收（标记⑥），验收需求、UI效果、业务逻辑等是否产生BUG。因为做为研发人员在开发业务需求时，一般都是顺着业务逻辑一步步的走，虽然在开发的时没问题，但让用户使用时他们并不会按业务逻辑来走，他们也不知道是什么逻辑，那么“测试工程师”也相当于用户体验已完成开发的项目，有可能有意想不到的问题出现，这些问题就是我们常说的BUG。
   项目测试也是会分为多轮的测试，例如：测试工程师在第1轮测试中将测出的问题全部记录BUG面板，研发人员的流程也就再一次回到了开发任务中，此时就是修复BUG，将第1轮面板的所有BUG修复完成后就会再一次的部署最新的代码到测试环境（标记⑥），那么测试工程师便会进行第2轮的测试并且查看第1轮修复的BUG是否能达到验收的状态，不断的循环此环节直至项目达到上线标准。
5. 项目迭代
   迭代是在产品第1期功能的基础上进行第2期的需求开发，对于产品来说不可能一次性可以将功能开发的很完善，用户在使用的过程中可能会反馈一些关于产品不合理的情况或者是业务需求变动或是新增功能之类的，需要在第2期开发，这种情况属性“迭代开发”。简单的理解就是在原基础上进行功能的增加或删减或是优化等，而此时又回到第1步的“原型评审”再一次的走流程，直到第2期的需求开发完成再接着第3期、第4期的需求开发。

小结

一个新项目的启动与其相关的原型、需求文档是至关重要的，没有前一步的规范也就不会有下一步的高质量输出。项目开发过程也必须是紧密配合的，需要做到每个环节的信息“对称”，使大家对需求的理解和业务变更的信息同步。规范的开发流程是团队协作的重要体现之一，也是能够使项目顺利进展的一种规范。

第2章 项目构建

2.1 Node.js

2.2 开发工具

2.3 脚手架安装

2.4 项目创建

2.4.1 命令构建项目

2.4.2 可视化构建项目

2.5 项目仓库

2.5.1 申请仓库

2.5.2 推送项目

2.6 项目分支

2.6.1 分支命名

2.6.2 分支管理

2.6.3 分支创建

小结

第3章 初始项目

第4章 Vue3的变化

第5章 登录注册业务需求

第6章 管理后台搭建

第7章 VUEX状态管理

第8章 路由守卫

第9章 信息管理模块

第10章 组件化

第11章 系统配置

第12章 权限功能

第13章 项目部署