从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 的命令行工作，快速创建微前端应用、组件，作为开发过程中的加速器。目录如下：
-
组件库提取
-
基座大厅改造
-
业务微前端应用开发
-
命令行开发
说再多也没用，动手才是王道。后面的文章一定会给你新的体验。没有华丽的辞藻，没有动人的篇章，只有朴实的技术和优雅的架构，以及动人的旋律。
欢迎关注我的个人公众号，留言可加我个人微信 