前端微架构实践(Vue)

时间 2019-11-06

标签前端架构实践 vue 栏目系统架构繁體版

原文原文链接

本文同步发表在我的博客：前端微架构实践前端

前言

为了拆分与适当解耦聚合业务各模块，咱们须要采用一种友好的开发模式去解决这些问题，咱们的愿景是：vue

☕️ 主子项目独立开发、部署
🔥 主子项目开发时保持热更新
🚗 主项目提供路由容器，子项目只是挂载到容器中的视图
👊 主子项目共用一个 Vue、Router、Store 实例，这样能保证能共享全局组件或 Vue 插件
📦 子项目在开发时会动态注入主项目容器、打包后不会包含任何主项目代码
💻 不涉及 Node 服务，配置文件存储在 CDN 中

Tips: 为了不主项目打包体积过大，能够将库代码抽取为 CDN 引入（默认），这样子项目动态注入时下载更快。webpack

⚠️ 关于按需加载，在开发环境下，因为webpack devServer 加载资源时是不会跨项目加载的，因此是没法作到的，固然能够改造 webpack 的加载逻辑，把待加载的资源 origin 设置为项目菜单配置中的 origin。打包后若是主子项目的静态资源部署在同一个目录下，是能够支持按需加载的。git

开发流程

1.安装 micro-structure-cli 插件github

npm install -g micro-structure-cli
复制代码

2.建立配置文件，并能够经过 http 访问到该文件web

Tips：在开发时，你能够在主项目的 /public/ 目录下建立npm

配置文件结构示例：bash

/* * 目前这个配置文件的格式有待完善 * 配置文件对应着加载器逻辑 */
window._MICRO_APP_CONFIG = {
  // 开发环境的配置
  devMenu: [
    {
      // 资源的惟一标识，用来避免重复加载
      id: 'index',
      name: '首页',
      path: '/',
      // 该项目入口文件的 path，也就是去掉下面 origin 后的地址
      urlPath: '/app.js',
      // 将 origin 抽取出来的目的是用来判断
      // 当前路由对应的项目资源 是否为 当前 devServer ，避免重复加载
      origin: 'http://localhost:8080'
    }
  ],
  // 非开发环境
  normalMenu: []
}
复制代码

3.建立主项目架构

# 初始化选择主项目
micro init

# 提示输入菜单配置文件 url 地址

# 安装依赖
npm install 

启动服务
npm run serve
复制代码

4.建立子项目app

# 初始化选择子项目
micro init

# 安装依赖
npm install 

# 安装主项目资源注入插件
vue add micro

# 启动服务
npm run serve

# 在配置文件中，增长子项目的菜单信息

# 主项目有更新时，运行命令会自动刷新
npm run micro
复制代码

加载器

加载器存在于主项目中，用来加载当前 path 对应的子项目，同时给路由添加守卫，在离开前加载对应路由的子项目。

由上面的配置文件暴露的 window 对象 _MICRO_APP_CONFIG 加载器的逻辑也在该对象下

window. _MICRO_APP_CONFIG = {
  // 已区分环境的菜单列表
  menu: [],
  // 加载方法
  load: function (menuItem) {
  },
  // 初始化时为路由添加的守卫
  addWatch: function () {}
}
复制代码

若是是正常的路由跳转，加载器会自动处理。若是须要预加载，能够手动触发 load 方法。

Tips：加载时的 loading 未实现

流程图

最后完整的项目地址：micro-structure

适用场景

业务复杂的中台系统不用多说，颇有必要。另外，同类性质的简单页面也适用，例如营销活动页面，能够将库、请求、通用逻辑抽象到主项目上，子项目只用关注活动自己，减少了项目体积，能很是有效的提高开发速度。

也就是说，并非在业务上属于一个模块的才归属到子项目中，子项目是路由集合，形态结构上属于同一类的业务也能够被归属到一块儿。

扩展

很显然，这是基于 Vue 及 Vue 原型来实现的一套方案，若是换作是 React 呢？或者主子项目跨技术栈呢？我想这些都会比较容易去思考实现。由于这是接下来要作的事情。