配音阁在线制作网站,网页设计公司宣传事例,企业网站建设和网络营销的关系,血液中心网站建设方案1、安装qiankun
npm install qiankun --save2、主应用中注册和配置qiankun
在主应用的入口文件main.ts中#xff0c;引入qiankun的注册方法#xff1a;
import { registerMicroApps, start } from qiankun;创建一个数组#xff0c;用于配置子应用的相关信息。每个子应用都…1、安装qiankun
npm install qiankun --save2、主应用中注册和配置qiankun
在主应用的入口文件main.ts中引入qiankun的注册方法
import { registerMicroApps, start } from qiankun;创建一个数组用于配置子应用的相关信息。每个子应用都需要提供一个名称、入口URL、挂载点和一些可选配置项。例如
const apiEnv {dev: http://localhost:8081/, // 此处不能使用network必须用local不然会报错跨域test: http://10.11.12.13/api/,production: http://10.11.12.13/api/
}const apps [{name: 子应用1,entry: process.env.NODE_ENV development ? apiEnv.dev : ...根据环境去判断用哪个地址具体不写了, // 子应用的入口URLcontainer: #subcontainer, // 子应用的挂载点activeRule: /sub-app1, // 子应用的激活规则就是子应用的公共路径设置在createHistory里面的那个},{name: 子应用2,entry: http://localhost:8082,container: #subcontainer,activeRule: /sub-app2,},// 其他子应用的配置
];调用 registerMicroApps 方法注册子应用
registerMicroApps(apps, {// qiankun 生命周期钩子 - 微应用加载前beforeLoad: (app) {console.log(before load, app.name);return Promise.resolve();},// qiankun 生命周期钩子 - 微应用挂载后afterMount: (app) {console.log(after mount, app.name);return Promise.resolve();}
});调用 start 方法启动qiankun微前端应用
start({sandbox: {experimentalStyleIsolation: false}
});在主应用的根文件里面要放一个子应用的容器
templatediv idappHeader /div idcontainerMenu v-ifbreadCrumbList.length /main :idisSub.length ? main : includedBreadCrumb v-ifbreadCrumbList.length/router-view :key$route.path /router-viewsection idcommonContainer v-if!breadCrumbList.length/section/main /div/div
/templatescript
import Menu from ./layout/Menu.vue;
import Header from ./layout/Header.vue;
import BreadCrumb from ./layout/BreadCrumb;
export default {name: App,components: {Menu,Header,BreadCrumb,},computed: {isSub() {// vue2写法写起来比较方便就这样先举例了return this.$route.matched;},},
};
/script3、子应用中配置qiankun
安装qiankun在main.ts中配置
// Element-plus
import ElementPlus from element-plus;
import element-plus/dist/index.css;
// Element Plus 组件 默认 使用英语
import zhCn from element-plus/es/locale/lang/zh-cn
// Element-plus图标引入
import * as ElementPlusIconsVue from element-plus/icons-vue
// Echarts依赖引入
import * as echarts from echarts
// 引入d3
import * as d3 from d3;
// 阿里字体
import ./assets/font/iconfont.css;
import ./public-path;
import { createApp } from vue;
import { createRouter, createWebHistory } from vue-router;
import App from ./App.vue;
import routes from ./router;
import store from ./store;
import { getLocationParams } from /utils/common.js// ts-ignore
let router null;
let instance null;
let history null;// ts-ignore
function render(props {}) {// ts-ignoreconst { container } props;// ts-ignorehistory createWebHistory(window.__POWERED_BY_QIANKUN__ ? /mainapp/subapp : /subapp);// history createWebHistory();router createRouter({history,// ts-ignoreroutes,});// 由于登录页面是用的统一页面所有登录逻辑放在了导航守卫里面router.beforeEach(async(to, from, next) {const token localStorage.getItem(token)if (token) {}else {if (getLocationParams(id_token)) {localStorage.setItem(token, getLocationParams(id_token));await store.dispatch(getUserInfo)next()}else {store.dispatch(login)}}next()})instance createApp(App);instance.use(router).use(store).use(ElementPlus, {locale: zhCn,});instance.mount(container ? container.querySelector(#apm) : #apm);// 全局引入element-plus图标库for (const [key, component] of Object.entries(ElementPlusIconsVue){instance.component(key, component)}
}
// 独立运行时:项目不在乾坤中调用则独立运行
// ts-ignore
if (!window.__POWERED_BY_QIANKUN__) {render();
}
function storeTest(props) {props.onGlobalStateChange props.onGlobalStateChange((value, prev) console.log([onGlobalStateChange - ${props.name}]:, value, prev),true,);props.setGlobalState props.setGlobalState({ignore: props.name,user: {name: props.name,},});
}
/*** bootstrap 只会在微应用初始化的时候调用一次下次微应用重新进入时会直接调用 mount 钩子不会再重复触发 bootstrap。* 通常我们可以在这里做一些全局变量的初始化比如不会在 unmount 阶段被销毁的应用级别的缓存等。*/
// ts-ignore
export async function bootstrap() {console.log(%c%s, color: green;, vue3.0 app bootstraped);
}
// 应用每次进入都会调用 mount 方法通常我们在这里触发应用的渲染方法
export async function mount(props) {console.log(%c%s, color: green;,子应用挂载)storeTest(props);render(props);instance.config.globalProperties.$onGlobalStateChange props.onGlobalStateChange;instance.config.globalProperties.$setGlobalState props.setGlobalState;
}
// 应用每次 切出/卸载 会调用的方法通常在这里我们会卸载微应用的应用实例
export async function unmount() {console.log(%c%s, color: red;,子应用卸载)instance.unmount();instance._container.innerHTML ;instance null;// 销毁路由不然下次进入子应用时不显示首页而是展示上次定位的路由页面router null;history.destroy();
}src下新建public-path.ts
// 为了静态资源的引入
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}qiankun的用处
微前端架构可以将多个独立的应用程序合成一个整体实现多个团队并行开发、独立部署和运行提高开发效率和灵活性。独立运行每个独立的前端应用程序都可以在自己开发环境中进行开发和测试然后独立部署和运行这样可以避免应用之间的相互影响和冲突提高可靠性和稳定性。共享资源qiankun提供了资源共享的机制可以将公共的依赖库和资源进行统一管理避免重复加载和浪费。这样可以减少页面加载时间和资源占用提高性能和用户体验。动态加载qiankun支持动态加载子应用可以根据需要进行按需加载和卸载。这样可以减少初始加载时间和资源占用提高页面响应速度。跨框架支持qiankun不仅支持Vue.js还支持其他主流的前端框架例如React和Angular。这样可以实现不同框架之间的协同工作提高开发团队的灵活性和选择性
