开篇: 微前端落地, 乾坤初探之最小系统
站长
· 阅读数 17
前言
前一段时间, 写了强盛集团管理系统(基于BPMN引擎的工作流系统), 打算使用qiankun改造下项目架构, 迈向微前端, 今天开始第一章。
快速创建 Vue 项目
- 安装 Vue CLI
npm install -g @vue/cli
# OR
yarn global add @vue/cli
2. 创建项目 project-name(如 base)
vue create base
3. 选择你的配置
搭建 vue 基座
基座可以是 Vue、React、等
- 安装 qiankun
yarn add qiankun # 或者 npm i qiankun -S
2. 在基座(主应用)中注册子应用(微应用)
在 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的老项目完成技术架构升级,从而达到技术栈更新、迁移、重构、重写等架构演进。