Vue企业级优雅实战-00-开篇

从2018.1.开始参与了多个企业的中台建设，这些中台的技术选型几乎都是基于 Spring Cloud 微服务架构 + 基于 Vue 全家桶的前端。我前后端架构及开发我几乎各占一半的精力，在企业级前端开发中有一些心得体会：从使用组件库，到二次封装组件库、命令行加速器，再到业务开发。多个项目中发现有很多可复用或重复的内容，于是今年年初便着手搭建一套基础开发框架。

这套基础开发框架包括了一个中后台的通用功能，如 认证授权 （我使用 Spring Security + OAuth2 + JWT，前后端授权、服务之间权限）、权限管理、日志管理、组织机构管理、字典管理等。在搭建这整套基础开发框架的过程中，我记录下了开发日志。于是便将这些开发日志进行整理和完善，从而形成这一大个庞大体系的实战文章。文章中涉及的代码及资料会同步提交到 github 与 gitee 上，大家可以在学习或实战中使用。

整体看来，这个体系包括三大部分：

• 基于 Spring Cloud 企业级后端微服务
• 基于 Vue、Qiankun 企业级前端微前端
• 基于 Jenkins、Gitlab 企业级基础 DevOps

三个部分会交替进行更新，预计每周更新 2 - 3 篇。 本文属于《基于 Vue 全家桶企业级开发实战》系列的开篇，接下来的内容围绕本系列进行展开。

技术和原则

技术栈

简单来说，Vue 全家桶是指：Vue + Vue Cli + VueX + Vue Router， 整个开发过程中，我使用到 Element UI 及一些其他依赖的类库，文章中我会逐渐添加进去。有关框架或库及其版本号如下：

框架或库	版本号	描述
vue-cli	4.4.0	vue命令行工具
vue	2.6.11	vue核心
vue-router	3.2.0	vue路由
vuex	3.4.0	vue状态管理
vuex-persistedstate	3.0.1	vue状态管理持久化
vue-i18n	8.18.2	vue国际化
element-ui	2.13.2	组件库
vue-quill-editor	3.2.0	富文本编辑器组件
axios	0.19.2	网络请求类库
mockjs	1.1.0	模拟数据工具
qiankun	2.0.21	微前端实现
jsencrypt	3.0.0-rc.1	RSA等算法加解密类库
jwt-decode	2.2.0	JWT工具类
moment	2.27.0	时间工具类

开发原则

实现功能任何人都能做到，但我的目标是是 优雅 开发实战，在开发过程中，我秉承着 组件化、模块化、工程化 的思想，尽我最大努力实现 优雅 二字。封装的所有组件，目标是让业务开发由大量复制粘贴、大量HTML模板代码，变成简洁模板、高度配置化的风格，从而实现代码生成，提高生产效率。

顺便提一下，本系列文章可能不太适合 0 基础的同学，因为基础的东西（如 HTML、CSS、ES6语法、Vue 路由、组件、指令等基础概念）不会去解释讲解，本系列文章的重点是 思想与架构 的 落地实现 。你多多少少要了解一些 Vue 的基础知识，再跟着本系列文章实战，可能才会有效果。

实现顺序

接下来谈谈整个前端的实现顺序，同时也是这个系列文章的大纲，整体看来包括两大部分：单体架构篇、微前端篇。

单体架构篇

这是按照目前市面上主流 90% 的方式进行开发的，只有一个工程，所有的组件、页面等都在一个工程中。不过我会按模块化的思路进行开发，便于后期微前端的实现。这个部分会穿插着组件开发、框架开发、业务开发几个部分，文章的顺序，也是我在开发过程中的开发顺序，跟着文章可以一步一步实现完全一样的效果。这个部分的目录如下：

• 开篇
• 环境准备及工程创建
• 组件开发 - SVG 图标组件
• 框架开发 - 登录界面
• 框架开发 - 封装基于 Axios 的请求
• 框架开发 - 封装基于 MockJS 的模拟数据
• 框架开发 - 状态管理
• 框架开发 - 实现动态路由加载
• 框架开发 - 多 Module 支持
• 框架开发 - 实现 Tab 标签页
• 组件开发 - 页面容器组件封装
• 组件开发 - 搜索区域组件封装
• 组件开发 - 数据列表组件封装
• 框架开发 - 页面缓存
• 组件开发 - 表单组件封装
• 功能开发 - 字典管理
• 功能开发 - 组织机构管理（组织类型管理、组织机构管理、岗位管理）
• 功能开发 - 权限管理（用户、角色、资源管理）

微前端篇

随着项目业务的增大，如果所有代码全在一个工程中进行开发和构建，会产生类似后端单体应用的诸多问题。在开发完上面的基础功能后，我会进行有关改造和开发工作，首先将前面封装的各个组件提取为一个独立的组件库工程，然后将通用功能沉淀在基座大厅中，将业务功能拆分放在独立的微前端工程中，最后开发一个类似 Vue-cli 的命令行工作，快速创建微前端应用、组件，作为开发过程中的加速器。目录如下：

• 组件库提取
• 基座大厅改造
• 业务微前端应用开发
• 命令行开发

说再多也没用，动手才是王道。后面的文章一定会给你新的体验。没有华丽的辞藻，没有动人的篇章，只有朴实的技术和优雅的架构，以及动人的旋律。

---

欢迎关注我的个人公众号，留言可加我个人微信

程序员搞艺术