什么是微前端
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
中,就在路由表中配置微应用激活规则,路由的 component
放 layouts
,当你点击跳转到/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群,和大家一起交流技术吧~