01-开篇：微前端落地乾坤初探之最小系统

前言

前一段时间, 写了强盛集团管理系统(基于BPMN引擎的工作流系统), 打算使用qiankun改造下项目架构, 迈向微前端, 今天开始第一章。

快速创建 Vue 项目

安装 Vue CLI

npm install -g @vue/cli
# OR
yarn global add @vue/cli

创建项目 project-name(如 base)

vue create base

选择你的配置

搭建 vue 基座

基座可以是 Vue、React、等

安装 qiankun

yarn add qiankun # 或者 npm i qiankun -S

在基座(主应用)中注册子应用(微应用)

在 main.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

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

import "./register-apps.js";

修改基座端口防止影响到其他项目vue.config.js

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 1000,
  },
});

在基座App.vue中添加挂载节点

<template>
  <div id="app">
    <nav>
      <router-link to="/">基座首页</router-link> |
      <router-link to="/about">基座关于页</router-link> |
      <router-link to="/vue/">微应用首页</router-link> |
      <router-link to="/vue/about">微应用关于页</router-link>
    </nav>
    <div id="container"></div>
    <router-view />
  </div>
</template>

搭建 Vue 微应用

不需要安装 qiankun, 只需要在main.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;
}

qiankun 需要 umd 类型的文件, 修改vue.config.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",
    },
  },
});

此时在基座中已经看到微应用, 但路由跳转及图片展示出错, src 下添加``public-path.js`

/*eslint disable no undef*/
// 上方这一行用于eslint的忽略，因为下方代码的指向其实是不存在的，在有eslint的环境中不加入此行会报错
if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

在 main.js 引入 public-path,

import "./public-path.js";
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

经过上面的操作, 图片已经正常访问了, 但跳转还是有问题, 修改router/index.js的 base

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;

总结

至此, 一个以 Vue2.x 搭建的乾坤入门框架就搭建好了, 可以依照此文章快速搭建入门乾坤框架。

而本专栏就是打算将Vue2.x的老项目完成技术架构升级，从而达到技术栈更新、迁移、重构、重写等架构演进。