Vue.js 3.0 企业级管理后台开发实战 基于Element Plus_vue.js 3.x+element plus前端开发实战 pdf

本书内容

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

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

第 3 章“初始化项目” 讲解 Vue.js 项目的运行入口和项目的文件结构分布，并且在开发项
IV ∣ Vue.js 3.0 企业级管理后台开发实战：基于 Element Plus
目前，通过初始化项目依赖第三方 UI 包、删除浏览器默认样式等操作提高工作开发效率，更好
地还原 UI 稿件。

第 4 章“Vue.js 3 的变化” 主要介绍 Vue.js 3 的一些新的 API 特性、Vue.js 2 和 Vue.js 3 生
命周期的区别，以及新的声明对象语法。了解本章内容，可以使后续的开发工作更为顺畅。

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

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

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

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

第 9 章“信息管理模块” 介绍独立模块，结合第三方 UI 的开发过程，同时结合项目原型、
项目 UI 及更多的 API 接口联调，以便读者进一步熟悉业务的整体开发过程。

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

第 11 章“系统配置” 介绍如何通过“角色”桥接“用户”，实现用户的权限分配。通过二
次封装的组件，完成对“菜单管理”“角色管理”“用户管理”3 个模块的开发，有助于读者体
会到传统开发方式和组件开发方式的区别。

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

第 13 章“项目部署” 介绍项目打包的环境变量配置和优化，通过优化使项目体积变小，提
高项目加载速度，并简单介绍如何通过部署服务器来访问开发完成的项目。

使用示例

本书示例以 Windows 7 及以上系统为基础运行，也可以在 macOS 系统运行，需要安装以下
软件。

• Chrome 23 或更高版本、Safari 6 或更高版本、Firefox 21 或更高版本、Opear 15 或更 高版本。
• Visual Studio Code 最新版本。
• Node.js 8 或更高稳定版本。
• Git 最新版本。
• 项目依赖包版本：Vue.js 3.0（^{3.2.27）、Vue-Router（}4.0.0）、Vuex（^4.0.0）、Element
  Plus（^2.0.1）。

项目源码及配套文件

在学习本书示例代码时，既可以手动输入代码，也可以使用 Git 工具拉取 Gitee 仓库源码文
件，源码拉取地址见链接 0-1。仓库源码拉取成功后，可一次性拉取项目的所有远程分支，指令
如下。

• 拉取所有分支：git branch -r | grep -v ‘->’ | while read remote; do git
  branch --track “KaTeX parse error: Expected '}', got '#' at position 8: {remote#̲origin/}" "remote”; done。
• 创建并更新所有本地远程分支：git fetch --all。
• 同步所有远程分支代码：git pull --all。

源码拉取完成后，可使用 git branch --list 指令查看项目的所有分支，项目分支与本书中“代
码清单”一一对应。读者可在作者的个人网站（见链接 0-2）中下载和本书相关的所有配套资料，
包括所有章节的 UI 稿件、原型图及项目源码等。

• Vue.js 3.0+Element Plus 企业级管理后台项目见链接 0-3。
• Vue.js 3.0+Element Plus 企业级管理后台原型见链接 0-4。
• 本书学习思维导图见链接 0-5。

建议与反馈

作者本人经常接触管理后台，不敢说自己的水平有多高，只是在平时工作中开发的项目比
较多，对管理后台比较熟悉，同时做了各种各样的笔记。本书开设了专门的微信群，以便读者
共同学习、交流、分享。作者的个人网站还提供了很多项目视频，其中包含 React 16 版本、Vue.js
3+Ant Design Vue.js、移动端项目、模块化项目等，供读者学习参考。
虽然作者已尽最大努力确保本书内容和项目源码正确，但因水平有限，书中难免出现错误。
如果你在阅读本书时发现任何错误或问题，可以通过作者的个人网站进行联系，同时你也可以
在项目仓库（见链接 0-6）中提交问题。这些勘误信息不仅有助于进一步提高图书质量，也能让
更多读者受益。

注意事项

本书所有代码清单中所声明的“变量”及“方法”均可自定义，并非业界标准。本书的所
有代码，无论是业务逻辑还是函数方法的封装，均符合常规性语法，并没有使用复杂的逻辑。
项目仓库所提供的代码仅供学习参考，请勿用于商业用途，对于因商业用途导致的任何问题，
本书作者概不负责。