--- theme: channing-cyan --- ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/785f7f75906a40d4bb651cdd85135340~tplv-k3u1fbpfcp-watermark.image?) ## 前言前一段时间, 写了强盛集团管理系统([基于BPMN引擎的工作流系统](https://note.youdao.com/s/Zeok2pza)), 打算使用qiankun改造下项目架构, 迈向微前端, 今天开始第一章。 ## 快速创建 Vue 项目 1. 安装 Vue CLI npm install -g @vue/cli # OR yarn global add @vue/cli 2\. 创建项目 project-name(如 base) vue create base 3\. 选择你的配置 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/918fca0dd1dd4e80a14d33a8ad2ec14b~tplv-k3u1fbpfcp-zoom-1.image) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc13d9a27f8e4cf6a6e97a43c1c8ff02~tplv-k3u1fbpfcp-zoom-1.image) ## 搭建 vue 基座 > 基座可以是 Vue、React、等 1. 安装 qiankun yarn add qiankun # 或者 npm i qiankun -S 2\. 在基座(主应用)中注册子应用(微应用) > 在 main.js 加入 ```js import { registerMicroApps, start } from "qiankun"; registerMicroApps([ [ { name: "vueApp", entry: "//localhost:1100", // 默认vue启动的入口是1100端口 activeRule: "/vue", // 当路径是 /vue的时候启动 container: "#container", // 应用挂载的位置 loader, props: { a: 1, util: {} }, }, ], ]); start(); ``` > 或 **新建`register-apps.js`** ```js import { registerMicroApps, start, initGlobalState } from "qiankun"; const loader = (loading) => { console.log("加载状态", loading); }; const actions = initGlobalState({ name: "前端小溪", age: 27, }); actions.onGlobalStateChange((newVal, oldVal) => { console.log("parent", newVal, oldVal); }); registerMicroApps( [ { name: "vueApp", entry: "//localhost:1100", // 默认vue启动的入口是1100端口 activeRule: "/vue", // 当路径是 /vue的时候启动 container: "#container", // 应用挂载的位置 loader, props: { a: 1, util: {} }, }, ], { beforeLoad() { console.log("before load"); }, beforeMount() { console.log("before mount"); }, afterMount() { console.log("after mount"); }, beforeUnmount() { console.log("before unmount"); }, afterUnmount() { console.log("after unmount"); }, } ); start({}); ``` 在`main.js` 中引入 `register-apps.js` ```js import "./register-apps.js"; ``` 3. 修改基座端口防止影响到其他项目`vue.config.js` ```js const { defineConfig } = require("@vue/cli-service"); module.exports = defineConfig({ transpileDependencies: true, devServer: { port: 1000, }, }); ``` 4. 在基座`App.vue`中添加挂载节点 ```vue ``` ## 搭建 Vue 微应用 1. 不需要安装 qiankun, 只需要在`main.js`中添加三个函数 ```js import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; // new Vue({ // router, // store, // render: h => h(App) // }).$mount('#app') Vue.config.productionTip = false; let instance = null; function render(props = {}) { const { container } = props; instance = new Vue({ router, store, render: (h) => h(App), }).$mount(container ? container.querySelector("#app") : "#app"); } // 独立运行时 if (!window.__POWERED_BY_QIANKUN__) { render(); } export async function bootstrap() { console.log("[vue] vue app bootstraped"); } export async function mount(props) { console.log("[vue] props from main framework", props); render(props); } export async function unmount() { instance.$destroy(); instance.$el.innerHTML = ""; instance = null; } ``` 2. qiankun 需要 umd 类型的文件, 修改`vue.config.js` ```js const { defineConfig } = require("@vue/cli-service"); module.exports = defineConfig({ transpileDependencies: true, devServer: { port: 1100, headers: { "Access-Control-Allow-Origin": "*", }, }, configureWebpack: { output: { libraryTarget: "umd", library: "m-system", }, }, }); ``` 3. 此时在基座中已经看到微应用, 但路由跳转及图片展示出错, src 下添加\`\`public-path.js\` ```js /*eslint disable no undef*/ // 上方这一行用于eslint的忽略，因为下方代码的指向其实是不存在的，在有eslint的环境中不加入此行会报错 if (window.__POWERED_BY_QIANKUN__) { __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; } ``` 4. 在 main.js 引入 public-path, ```js import "./public-path.js"; import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; ``` 5. 经过上面的操作, 图片已经正常访问了, 但跳转还是有问题, 修改`router/index.js`的 base ```js import Vue from "vue"; import VueRouter from "vue-router"; import HomeView from "../views/HomeView.vue"; Vue.use(VueRouter); const routes = [ { path: "/", name: "home", component: HomeView, }, { path: "/about", name: "about", component: () => import(/* webpackChunkName: "about" */ "../views/AboutView.vue"), }, ]; const router = new VueRouter({ mode: "history", base: window.__POWERED_BY_QIANKUN__ ? "/vue/" : "/", routes, }); export default router; ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2f3c970a39f14be895b97a945068bbff~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a0a77afa10d44e2191b5df43b2454cb1~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/379e6407d3354ab69bed66f1df121f51~tplv-k3u1fbpfcp-watermark.image?) ## 总结至此, 一个以 Vue2.x 搭建的乾坤入门框架就搭建好了, 可以依照此文章快速搭建入门乾坤框架。而本专栏就是打算将Vue2.x的老项目完成技术架构升级，从而达到技术栈更新、迁移、重构、重写等架构演进。 [项目地址](https://gitee.com/wang_xi_long/qiankun-web):