【中台】靓仔请留步,跟我一起撸中后台啊~(系列篇一: Demo)

575 阅读4分钟

什么是微前端

qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台,是一个基于 single-spa 的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

优点是什么?

微前端架构具备以下几个核心价值:

  • 技术栈无关
    • 主框架不限制接入的技术栈,微应用具备完全自主权
  • 独立开发、独立部署
    • 微应用仓库独立,前后端可独立开发,部署完成后主框架完成同步更新
  • 增量升级
    • 在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略
  • 独立运行时
    • 每个微应用之间状态隔离,运行时状态不共享

接下来就先实现一个小例子吧!

新建项目

安装@vue/cli

npm install -g @vue/cli

初始化项目

vue create projectName

- 创建项目很慢?

可能是旧的npm缓存与项目冲突(npm版本太低,升级npm到最新版本就可以了,升级:npm install -g npm)

1. 步骤一: 
> npm cache clean --force
2. 步骤二
> npm config set registry https://registry.npm.taobao.org

安装 @vue/typescript 依赖

打开项目,在控制台执行 vue add @vue/typescript,一直 Yes 就对了。@,@~~~

创建主体

安装依赖 npm install qiankun -S

主体项目配置很简单,看下api文档即可(qiankun详细api用法

// 最简单的配置,在 main.js 中加入下面这段代码
import { registerMicroApps, start } from 'qiankun'
const apps = [
  {
    name: 'zht_base-app', // 应用名称
    entry: '//localhost:9090', // 应用入口,资源路径
    container: '#vue', // 在主体中存放 子应用 的容器 id
    activeRule: '/vue', // 根据此规则切换指定子应用,激活规则
    props: {
      // 传递给子应用的数据
      name: 'zht_base-app',
      entry: '//localhost:9090'
    }
  }
]

registerMicroApps(apps, {
  beforeLoad: (app) => {
    console.log('加载应用之前打印apps', app)
  }
})

start({
  // 是否开启预加载,默认为 true。
  // 配置为 true 则会在第一个微应用 mount 完成后开始预加载其他微应用的静态资源
  prefetch: false,
  // boolean | { strictStyleIsolation?: boolean, experimentalStyleIsolation?: boolean
  sandbox: true
})

主体路由配置

注意:这里的 layouts 是渲染在 App.vue 文件的<router-view></router-view>中,主体的内容区域是在 layouts 的 router-view中渲染,并且渲染子应用的容器(#subAppContainer)也是放置在 layouts 中,需要在路由中配置激活微应用的路由(/vue),否则,在切换到微应用的时候,会报错说找不到放置微应用的容器。所以,如果需要将微应用渲染在 loyouts 的 #subAppContainer 中,就在路由表中配置微应用激活规则,路由的 componentlayouts,当你点击跳转到/vue 的菜单时,微应用就能正确找到注册时的容器(container)。

实际应用场景一般不是这样的,菜单部分就是每个应用的菜单,通过一个下拉菜单(或其它形式)切换应用来渲染不同的应用,通过vue-router的动态加载路由(addRoutes)功能动态渲染菜单。

import Vue from 'vue'
import VueRouter from 'vue-router'
// typescript 默认只识别 *.ts 文件,不识别 *.vue文件,所以在导入 .vue文件时需要加上后缀
import LoginPage from '@/views/login/index.vue'
import HomePage from '@/views/home/index.vue'
import Layouts from '@/layouts/index.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Layouts,
      children: [
        {
          path: '/login',
          component: LoginPage
        },
        {
          path: '/home',
          component: HomePage
        }
      ]
    },
    {
      path: '/vue',
      component: Layouts,
      children: [
        {
          path: 'about'
        },
        {
          path: 'home'
        }
      ]
    }
  ]
})

export default router
  • 主体结构

    • 渲染区域

    • 菜单部分

    subAppLists = [
      {
        name: 'vue app',
        homePath: '/vue'
      },
      {
        name: 'login',
        homePath: '/login'
      },
      {
        name: 'home',
        homePath: '/home'
      }
    ]
    

配置微应用

子应用配置

子应用不需要下载任何插件,即可完成配置,并接入到主应用当中

子应用导出钩子函数

子应用必须导出主体需要的钩子函数(详细用法

export async function bootstrap(params: object) {
  console.log('subapp bootstraped')
}

/**
 * 应用每次进入都会调用 mount 方法,通常我们在这里触发应用的渲染方法
 */
export async function mount(params: object) {
  console.log('subapp parent data', params)
  render()
}

/**
 * 应用每次 切出/卸载 会调用的方法,通常在这里我们会卸载微应用的应用实例
 */
export async function unmount(props: object) {
  console.log('subapp destroyed')
  instance.$destroy()
  instance = null
}

子应用如果是通过webpack运行的话,还需要配置webpack

1.
// 为了让主应用能正确识别微应用暴露出来的一些信息,微应用的打包工具需要增加如下配置
const packageName = require('./package.json').name;
module.exports = {
  output: {
    library: `${packageName}-[name]`,
    libraryTarget: 'umd',
    jsonpFunction: `webpackJsonp_${packageName}`
  }
}

2.
// publicPath 配置
// qiankun 将会在微应用 bootstrap 之前注入一个运行时的 publicPath 变量,你需要做的是在微应用的入口文件(一般是main.js)添加如下代码:
// window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ 表示项目的运行资源路径:比如 http://localhost:9090/
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__

子应用如何独立运行应用

function render() {
  instance = new Vue({
    router,
    render: h => h(App),
  }).$mount('#vue-app')
}

if (!window.__POWERED_BY_QIANKUN__) {
  // 如果子应用是独立运行,就直接render
  render()
} else {
  // 否则表示是在主体调用子应用
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

export async function mount(params: object) {
  render()
}

效果图

demo效果图,点击 vue app 菜单,即可切换到微应用。 login 以及 home 菜单就是中台自身的菜单,也会渲染在灰色区域。

通过这个小栗子,我们了解了如何去通过qiankun搭建我们自己的微前端服务了,后续我会继续更新文档,看看我们如何通过qiankun打造企业级的中后台应用!!

结尾

持续更新中,如果喜欢这部分内容,记得不要走丢了哦。

一起交流

加入我们的QQ群,和大家一起交流技术吧~

image.png