vue简易微前端项目搭建（一）：项目背景及简介

最近有空，准备写个系列教程，把公司目前在用的h5项目从搭建到实践优化的一些心得和经验记录一下，技术栈是vue2.x的，马上3.0正式版就要出了，再不写就要过时啦哈哈。

github传送门：
1、h5主项目
2、项目脚手架
3、子项目模板

1、项目需求

我司h5主要做移动端，运行在app和小程序里，也就是hybrid app混合开发模式。
刚来公司时，公司h5才刚开始起步，同事只开发了三个h5需求，这三个需求在业务功能上都是相互独立的，所以也分开放在了三个spa项目里。。。想一想，以后开发类似需求越来越多，难道要写n个项目吗，所以有必要设计一个多项目聚合方案。

2、关于微前端

我感觉今年随着qiankun2.0的发布，微前端概念突然火了很多，我记得去年也就是19年的时候还没那么火呢，不过这确实是未来前端发展的一个方向。
在前公司的时候，有配合过后端做过微服务迁移的需求，对后端的微服务有一定的了解，后端一般是把接口划分为一些模块，每个模块就是一个微服务粒度，比如user、goods，每个模块都可以单独启动、单独修改发布。
而微前端也是借鉴后端的微服务化，把前端根据功能划分成几个相对独立的子项目，可以单独编译发布。
本项目，可以说是简易的微前端项目，因为只适用于vue技术栈，也可以说基于vue的多项目聚合方案。

3、关于本项目架构思路

技术栈选择呢，由于之前已做需求都是vue写的，也对vue相对更加熟悉，所以就选定vue作为基础框架，也便于项目搭建完成后把之前项目迁移进来，整体架构也是借鉴了前公司的方案。
整体上是基于vue-cli4生成的项目进行改造搭建，根据业务划分为多个不同的子项目，

首先来看项目目录结构：

  ├── build                             // webpack相关配置
  ├── src                               // 核心源代码
  │   ├── projects                      // 存储所有子项目
  │   │   ├── demo                      // 子项目目录名
  │   │   │   ├── components            // 子项目公共组件
  │   │   │   ├── static                // 不打包的js目录
  │   │   │   ├── store                 // vuex存储
  │   │   │   ├── utils                 // 公共js
  │   │   │   │   ├── importVant.js     // vant按需引入
  │   │   │   │   └── routerGuards.js   // 路由导航守卫
  │   │   │   ├── views                 // 页面源码
  │   │   │   ├── config.js             // 子项目配置文件
  │   │   │   └── main.js               // 子项目入口文件
  │   │   └── ......                    // 其他子项目
  │   ├── resources                     // 存储全局公共资源
  │   │   ├── assets                    // 全局公共图片等
  │   │   ├── components                // 全局公共组件
  │   │   ├── mixins                    // 全局mixins混入
  │   │   ├── styles                    // 全局公共样式
  │   │   ├── native                    // 原生客户端交互封装
  │   │   │   ├── callNative.js         // 调用客户端方法
  │   │   │   ├── openNative.js         // 跳转客户端页面
  │   │   │   ├── regNative.js          // 注册js方法给客户端
  │   │   ├── utils                     // 全局公共js
  │   │   │   ├── flexible.js           // rem适配
  │   │   │   ├── globalGuards.js       // 全局路由导航守卫公共方法
  │   │   │   ├── polyfill.js           // 手动添加的polyfill降级方法
  │   │   │   └── request               // 全局接口请求相关
  ├── .env                              // 全局环境配置
  ├── .env.beta                         // beta环境配置
  ├── .env.dev                          // 本地环境配置
  ├── .env.prod                         // 线上环境配置
  ├── .env.test                         // test环境配置

如上：

• src目录包含projects和resources两个文件夹：
• resources存放公共资源文件，
• projects存放所有子项目，里面每个文件夹就是一个子项目，每个子项目相互独立，可以单独运行及打包。
• 部署到线上时，也是每个子项目隶属于不同的目录路径，例如子项目a是https://test.com/a/index.html，子项目b是https://test.com/b/index.html。

这样，不同的业务需求可以通过创建不同的子项目来开发，resources里有公共资源方法可以共用，例如公共样式、公共方法、客户端交互等等。

优点：

1、利于风险分散。子项目可以单独发布，即使代码修改有严重bug，发布后也只会影响这次发布的子项目，未发布的也就是之前已通过测试上线的可以照常运行。
2、利于多人开发。在业务需求繁多、开发人员较多的时候，很多需求就需要并行开发，一个需求分配几个开发人员，并行在一个统一项目下进行开发，这样就可以通过子项目的独立开发而互不影响，同时也只能方便使用公共资源和组件，保证并行开发的效率。

4、项目配套

由于项目的运行及打包需要指定选择一个子项目，为了提高命令使用效率，就做了个配套的脚手架工具，使用nodejs编写，主要用于创建子项目、子项目启动、打包等命令，可以指定子项目名和服务端环境。

同时也创建了个子项目模板，便于快速生成一个子项目，以及做子项目使用引导。

github地址见文章开头，业务相关代码已做清理。