README-zh.md

Nuxt-Micro-Front-End

使用 Nuxt 实践微前端架构，现在已经支持 qiankun

English

📖 发布日志

安装

1. 添加 @femessage/nuxt-micro-frontend 依赖到你的项目中

yarn add @femessage/nuxt-micro-frontend -D 

# or npm install @femessage/nuxt-micro-frontend

2. 添加 @femessage/nuxt-micro-frontend 到 nuxt.config.js 的 modules 属性中

{
  modules: [
    // 一般使用
    '@femessage/nuxt-micro-frontend',

    // 带上模块参数
    ['@femessage/nuxt-micro-frontend', { /* module options */ }]
  ]
}

模块参数

文档

推荐使用 build.devMiddleware.headers 属性来设置开发环境资源 http header, 可以查看 Nuxt API: The build Property > devMiddleware

path: 微前端生命周期函数定义文件，相对 rootDir 的路径

force: 强制使用模块功能，忽略 Nuxt 版本校验

unique: 由于 qiankun 需要一个唯一的包名区分多个子应用，如果懒得修改可以将这个属性设置为 true，这样会生成一个唯一的包名

output: 由于接入不同的生态体系，需要不同的打包格式，这里可以根据 webpack output 提供的选项进行注入

支持的微前端框架

• qiankun
• single-SPA demo 在 examples/single-spa-demo 下

微前端生命周期函数例子

Qiankun

• 增加了 mounted 和 beforeUnmount 两个钩子方便操作 vue 实例

开发

1. 克隆此仓库
2. 安装依赖 yarn install 或者 npm install
3. 运行 cd examples/normal && npm run dev 启动开发服务

License

MIT License

Copyright (c) FEMessage