## 你要什么两个项目host_modele主应用 — 外壳路由到子应用test_module子应用 — 表格插件纯展示组件## 子应用要改的文件### 1. vue.config.js — 开跨域 UMDjsmodule.exports {publicPath: /test_entry/, // 子应用唯一标识devServer: {port: 8082, // 固定端口headers: {Access-Control-Allow-Origin: *, // qiankun 跨域}},configureWebpack: {output: {libraryTarget: umd, // qiankun 用 UMD 加载}}}### 2. src/main.js — 导出 qiankun 生命周期jsimport Vue from vueimport App from ./App.vueimport createRouter from ./router.jslet instance nullfunction render(props {}) {const { container, bus } propsconst router createRouter()if (bus) Vue.prototype.bus bus // 接收主应用传来的总线instance new Vue({router,render: h h(App)}).$mount(container ? container.querySelector(#app) : #app)}// 独立运行if (!window.__POWERED_BY_QIANKUN__) {render()}// qiankun 生命周期三个必须export async function bootstrap() {}export async function mount(props) { render(props) }export async function unmount() {instance.$destroy()instance null}### 3. src/App.vue — JS 设高度防 qiankun bugvuetemplatediv idapprouter-view //div/templatescriptexport default {mounted() {// 向上遍历父链跳过零高度包装层const el this.$ellet p el.parentElementwhile (p p.clientHeight 0) p p.parentElementif (p p.clientHeight 0) {el.style.height p.clientHeight px}}}/script参见 [[qiankun-height-100-percent-bug]]### 4. 路由 — 指向插件组件jsimport Vue from vueimport Router from vue-routerVue.use(Router)export default () new Router({mode: history,routes: [{ path: *, component: () import(./views/PluginEntry.vue) }]})### 5. PluginEntry.vue — 胶水层组件重点胶水层负责三件事收 Props、管数据、接事件。vuetemplatePureComponent v-bindcomponentProps fetchhandleFetch //templatescriptexport default {data() {return {componentData: [],total: 0,}},computed: {pageParams() { return this.$root.pageParams || {} },componentProps() {return {...(this.pageParams.Props || {}),data: this.componentData,total: this.total,}}},created() {if (this.bus) {this.bus.$on(table:data, ({ list, total }) {this.componentData listthis.total total})this.bus.$emit(table:fetch, { page: 1, row: 20 })}},beforeDestroy() {if (this.bus) this.bus.$off(table:data)},methods: {handleFetch(params) {if (this.bus) this.bus.$emit(table:fetch, params)}}}/script**为什么需要它** TzxTable 是纯展示组件不管数据从哪来。PluginEntry 接管数据和事件让展示组件保持纯粹。[[tableentry-role-in-architecture]]## 主应用要改的文件### 1. App.vue — 放子应用容器vuetemplatediv idapp styleheight:100vh;div idsubapp-container stylewidth:100%;height:100%;/div/div/template### 2. main.js — 创建 bus、注册子应用jsimport Vue from vueimport axios from axiosimport { registerMicroApps, start } from qiankun// 创建事件总线关键const bus new Vue()Vue.prototype.bus bus// 主应用监听数据请求调后端bus.$on(table:fetch, async (params) {try {const res await axios.get(/stations, { params })if (res.data.status 1) {bus.$emit(table:data, {list: res.data.data.list,total: res.data.data.total})}} catch (err) {console.error(获取数据失败, err)}})registerMicroApps([{name: my-plugin,entry: //localhost:8082/test_entry/,container: #subapp-container,activeRule: /test_entry/my-plugin,props: {bus,params: {Props: {columns: [ /* 列配置 */ ],loadMode: page,pageSize: 20,}}}}])start()## 通信流程主应用│ bus new Vue()│ bus.$on(table:fetch) → axios → bus.$emit(table:data)│ 注册子应用时传 bus Props│└→ qiankun 加载│└→ PluginEntry│ Props bus → 传给 PureComponent│ 翻页 → bus.$emit(table:fetch)│ bus.$on(table:data) → 更新数据│└→ PureComponent只管渲染## 开发生命周期| 顺序 | 文件 | 注意 ||------|------|------|| 1 | vue.config.js | 跨域头 UMD || 2 | main.js子 | 三个生命周期 bus || 3 | App.vue子 | mounted 设高度 || 4 | PluginEntry.vue | 胶水层模板 || 5 | App.vue主 | 容器 div || 6 | main.js主 | bus 注册 |**How to apply** 新建 qiankun 子应用项目时按上述 6 步配置即可。核心记住**子应用只展示主应用只调接口bus 在中间传话。**
qiankun 微前端项目搭建指南（小白版）
## 你要什么两个项目host_modele主应用 — 外壳路由到子应用test_module子应用 — 表格插件纯展示组件## 子应用要改的文件### 1. vue.config.js — 开跨域 UMDjsmodule.exports {publicPath: /test_entry/, // 子应用唯一标识devServer: {port: 8082, // 固定端口headers: {Access-Control-Allow-Origin: *, // qiankun 跨域}},configureWebpack: {output: {libraryTarget: umd, // qiankun 用 UMD 加载}}}### 2. src/main.js — 导出 qiankun 生命周期jsimport Vue from vueimport App from ./App.vueimport createRouter from ./router.jslet instance nullfunction render(props {}) {const { container, bus } propsconst router createRouter()if (bus) Vue.prototype.bus bus // 接收主应用传来的总线instance new Vue({router,render: h h(App)}).$mount(container ? container.querySelector(#app) : #app)}// 独立运行if (!window.__POWERED_BY_QIANKUN__) {render()}// qiankun 生命周期三个必须export async function bootstrap() {}export async function mount(props) { render(props) }export async function unmount() {instance.$destroy()instance null}### 3. src/App.vue — JS 设高度防 qiankun bugvuetemplatediv idapprouter-view //div/templatescriptexport default {mounted() {// 向上遍历父链跳过零高度包装层const el this.$ellet p el.parentElementwhile (p p.clientHeight 0) p p.parentElementif (p p.clientHeight 0) {el.style.height p.clientHeight px}}}/script参见 [[qiankun-height-100-percent-bug]]### 4. 路由 — 指向插件组件jsimport Vue from vueimport Router from vue-routerVue.use(Router)export default () new Router({mode: history,routes: [{ path: *, component: () import(./views/PluginEntry.vue) }]})### 5. PluginEntry.vue — 胶水层组件重点胶水层负责三件事收 Props、管数据、接事件。vuetemplatePureComponent v-bindcomponentProps fetchhandleFetch //templatescriptexport default {data() {return {componentData: [],total: 0,}},computed: {pageParams() { return this.$root.pageParams || {} },componentProps() {return {...(this.pageParams.Props || {}),data: this.componentData,total: this.total,}}},created() {if (this.bus) {this.bus.$on(table:data, ({ list, total }) {this.componentData listthis.total total})this.bus.$emit(table:fetch, { page: 1, row: 20 })}},beforeDestroy() {if (this.bus) this.bus.$off(table:data)},methods: {handleFetch(params) {if (this.bus) this.bus.$emit(table:fetch, params)}}}/script**为什么需要它** TzxTable 是纯展示组件不管数据从哪来。PluginEntry 接管数据和事件让展示组件保持纯粹。[[tableentry-role-in-architecture]]## 主应用要改的文件### 1. App.vue — 放子应用容器vuetemplatediv idapp styleheight:100vh;div idsubapp-container stylewidth:100%;height:100%;/div/div/template### 2. main.js — 创建 bus、注册子应用jsimport Vue from vueimport axios from axiosimport { registerMicroApps, start } from qiankun// 创建事件总线关键const bus new Vue()Vue.prototype.bus bus// 主应用监听数据请求调后端bus.$on(table:fetch, async (params) {try {const res await axios.get(/stations, { params })if (res.data.status 1) {bus.$emit(table:data, {list: res.data.data.list,total: res.data.data.total})}} catch (err) {console.error(获取数据失败, err)}})registerMicroApps([{name: my-plugin,entry: //localhost:8082/test_entry/,container: #subapp-container,activeRule: /test_entry/my-plugin,props: {bus,params: {Props: {columns: [ /* 列配置 */ ],loadMode: page,pageSize: 20,}}}}])start()## 通信流程主应用│ bus new Vue()│ bus.$on(table:fetch) → axios → bus.$emit(table:data)│ 注册子应用时传 bus Props│└→ qiankun 加载│└→ PluginEntry│ Props bus → 传给 PureComponent│ 翻页 → bus.$emit(table:fetch)│ bus.$on(table:data) → 更新数据│└→ PureComponent只管渲染## 开发生命周期| 顺序 | 文件 | 注意 ||------|------|------|| 1 | vue.config.js | 跨域头 UMD || 2 | main.js子 | 三个生命周期 bus || 3 | App.vue子 | mounted 设高度 || 4 | PluginEntry.vue | 胶水层模板 || 5 | App.vue主 | 容器 div || 6 | main.js主 | bus 注册 |**How to apply** 新建 qiankun 子应用项目时按上述 6 步配置即可。核心记住**子应用只展示主应用只调接口bus 在中间传话。**
