甘肃肃第八建设集团网站1,预付网站建设服务费如何入账,网站设计职业工作室,中山市企业网站建设演示效果
子应用的项目 基应用嵌入子应用效果图 目录 前言 一、微前端是什么#xff1f; 它主要解决了两个问题#xff1a; 二、使用步骤 1.安装依赖 2.在入口处引入 3.子应用的路由#xff08;#xff09; 4.分配一个路由给子应用#xff08;重要#xff09;#xff0…演示效果
子应用的项目 基应用嵌入子应用效果图 目录 前言 一、微前端是什么 它主要解决了两个问题 二、使用步骤 1.安装依赖 2.在入口处引入 3.子应用的路由 4.分配一个路由给子应用重要基应用的路由 5.在基应用的MyPage页面中嵌入子应用 三、子应用的操作 1、设置基础路由(如果基座应用是history路由,子应用是hash路由这一步可以省略) 2、接收基应用传过来的数据进行路由跳转 3.子应用隐藏左边侧边栏和上边头部栏 在src\router\index.js下 总结 前言
博主在项目中由于多个团队开发项目需要相互嵌套从而了解到微前端micro-app嵌套项目从而简单记录一下使用过程 一、微前端是什么
微前端的概念是由ThoughtWorks在2016年提出的它借鉴了微服务的架构理念核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用每个应用都可以独立开发、独立运行、独立部署再将这些小型应用融合为一个完整的应用或者将原本运行已久、没有关联的几个应用融合为一个应用。微前端既可以将多个项目融合为一又可以减少项目之间的耦合提升项目扩展性相比一整块的前端仓库微前端架构下的前端仓库倾向于更小更灵活。
它主要解决了两个问题
1、随着项目迭代应用越来越庞大难以维护。2、跨团队或跨部门协作开发项目导致效率低下的问题
二、使用步骤
1.安装依赖 npm i micro-zoe/micro-app --save 2.在入口处引入
main.js
import microApp from micro-zoe/micro-app;microApp.start();if (window.__MICRO_APP_ENVIRONMENT__) console.log(我在微前端环境中)
else console.log(我不在微前端环境中)
if (window.__MICRO_APP_BASE_APPLICATION__) {console.log(我是基座应用)}
3.子应用的路由 4.分配一个路由给子应用重要基应用的路由
/*** 注意* 权限是通过路由中的 name 属性来进行定位所以 name 必须填写且唯一** isMenu false表示该路由仅仅是路由而不生成菜单* 默认所有路由都生成菜单不想生成菜单直接添加属性 isMenu 为 false 即可* 注意1.不需要每个路由都添加 isMenu 属性只需要给不需要生成菜单的路由添加该属性需要生成菜单的路由不需要加该属性* 2.二级菜单 isMenu 必须写在 children 里的每条路由上一级菜单写在 children 外面当前路由即可* 3.权限路由不需要添加 isMenu 因为权限路由是有后端返回的所以不需要添加 isMenu 属性* 特别注意 后台返回的权限菜单数据* path值与name的值后台返回的权限菜单中的path值与name值必须对应组件目录中的组件所在目录* 如角色路由组件 roles 目录必须与后台返回的数据中的角色路由 name 值一致否则加载不到组件* path/组件目录名称,* name:组件目录名称* path 与 name 必须对应组件目录名称*/// 所有人都可以访问const routes [{path: /login,//name:login,isMenu: false,component: () import(/* webpackChunkName: login */ /views/login.vue),},{path: /,name: dashboard,redirect: /home,isMenu: false,children: [{path: /home,name: home,meta: { title: 主页, icon: false },component: () import(/* webpackChunkName: home */ /views),},],},{path: /test,name: test,isMenu: true,meta: { title: 测试管理, icon: el-icon-s-tools },component: () import(/* webpackChunkName: test */ /views/test),},{path: /versiontwotable,name: 表格,isMenu: true,meta: { title: 表格2, icon: el-icon-s-tools },component: () import(/* webpackChunkName: test */ /views/versiontwo/pages/makecodeIndex.vue),},{path: /my-page/*,name: 子应用,isMenu: true,meta: { title: 子应用, icon: el-icon-s-tools },children: [// 其他的路由都写到这里{name: /,path: /,redirect: /index,meta: { title: index },isMenu: true,children: [{name: index,path: /index,meta: { title: index },component: () import(/views/microapp/pages/index.vue),},],},{name: /form,path: /form,redirect: /form/index,meta: { title: form },isMenu: true,children: [{name: /form/index,path: /form/index,meta: { title: form },component: () import(/views/microapp/pages/index.vue),},],},{name: /example,path: /example,redirect: /example/tree,meta: { title: example },isMenu: true,children: [{name: /tree,path: /example/tree,meta: { title: tree },component: () import(/views/microapp/pages/index.vue),},{name: /copy,path: /example/copy,meta: { title: copy },component: () import(/views/microapp/pages/index.vue),},],},{name: /table,path: /table,meta: { title: table },redirect: /table/index,isMenu: true,children: [{name: /table/index,path: /table/index,meta: { title: table },component: () import(/views/microapp/pages/index.vue),},],},{name: /admin,path: /admin,meta: { title: admin },redirect: /admin/index,isMenu: true,children: [{name: /admin/index,path: /admin/index,meta: { title: admin },component: () import(/views/microapp/pages/index.vue),},],},{name: /people,path: /people,meta: { title: people },redirect: /people/index,isMenu: true,children: [{name: /people/index,path: /people/index,meta: { title: people },component: () import(/views/microapp/pages/index.vue),},],},],},{path: /test1,name: test1,isMenu: true,meta: { title: 角色管理, icon: el-icon-s-tools },children: [{path: /roles3-2,name: roles93-2,meta: { title: 角色管理3-2, icon: el-icon-s-data },component: () import(/* webpackChunkName: test1 */ /views/test),},{path: /roles3-3,name: roles93-3,isMenu: true,meta: { title: 角色管理3-3, icon: el-icon-s-data },component: () import(/* webpackChunkName: tes3 */ /views/test),},{path: /roles3-1,name: roles93-1,isMenu: true,meta: { title: 角色管理3-1, icon: el-icon-s-data },children: [{path: /a,name: a,meta: { title: 角色管理1-1, icon: el-icon-s-data },component: () import(/* webpackChunkName: test5555 */ /views),},],},],},{path: /401,name: 401,isMenu: false,component: () import(/* webpackChunkName: 401 */ /views/error/401.vue),},];
5.在基应用的MyPage页面中嵌入子应用
基座下发跳转指令
!-- --
templatedivh1子应用/h1!--name(必传)应用名称url(必传)应用地址会被自动补全为http://localhost:3000/index.htmlbaseroute(可选)基座应用分配给子应用的基础路由就是上面的 /my-page--micro-appnameapp1urlhttp://localhost:8888/baseroute/my-pagekeep-alivedatachangehandleDataChange/micro-app/div
/templatescriptimport microApp from micro-zoe/micro-app;export default {data() {//这里存放数据return {};},//监听属性 类似于data概念computed: {},//监控data中的数据变化watch: {$route.path: {handler(newValue, oldValue) {console.log(当前的数据, newValue);microApp.setData(app1, { path: newValue }); //向子应用发送路由数据},immediate: true,},},//方法集合methods: {AppTo() {},},//生命周期 - 创建完成可以访问当前this实例created() {},//生命周期 - 挂载完成可以访问DOM元素mounted() {// const childData microApp.getData(app1); // 返回子应用的data数据// console.log(childData, childData);},methods: {handleDataChange(e) {console.log(来自子应用的数据, e.detail);},},};
/script
style langscss scoped/style三、子应用的操作
1、设置基础路由(如果基座应用是history路由,子应用是hash路由这一步可以省略)
/router/index.jsimport Vue from vue;
import VueRouter from vue-router;const router new VueRouter({// 设置基础路由子应用可以通过window.__MICRO_APP_BASE_ROUTE__获取基座下发的baseroute如果没有设置baseroute属性则此值默认为空字符串base: window.__MICRO_APP_BASE_ROUTE__ || process.env.BASE_URL,routes,
});main.jslet app new Vue({router,render: h h(App),
}).$mount(#app)
2、接收基应用传过来的数据进行路由跳转 在APP.vue这里
templatediv idapprouter-view //div
/template
script
export default {data() {//这里存放数据return {};},//生命周期 - 创建完成可以访问当前this实例created() {},//生命周期 - 挂载完成可以访问DOM元素mounted() {//第一种跳转// if (window.__MICRO_APP_BASE_ROUTE__) {// window.microApp.addDataListener((data) {// console.log(data的数据在这里冲冲冲, data);// this.$router.push({ path: data.path });// });// }},
};
/script
style
html,
body {width: 100%;height: 100%;margin: 0;padding: 0;
}
/style在main.js这里// 与基座进行数据交互
//第二种跳转
if (window.__MICRO_APP_ENVIRONMENT__) {console.log(我在微前端环境中);if (window.__MICRO_APP_BASE_ROUTE__) {// 监听基座下发的数据变化window.microApp.addDataListener((data) {console.log(data的数据在这里冲冲冲, data);console.log(router.currentRoute.value.path, router.currentRoute.path);// 当基座下发path时进行跳转if (data.path data.path ! router.currentRoute.path) {router.push({ path: data.path });}});}// 向基座发送数据setTimeout(() {window.microApp.dispatch({ myname: tenant-app });}, 3000);
} 3.子应用隐藏左边侧边栏和上边头部栏
第一种方法判断是否在微前端环境中如果是则隐藏反之显示
templateel-container!-- undefined取反是true --el-header v-if!isShowheader-temp/header-temp/el-headerel-containerel-aside v-if!isShow width200pxsidebar classsidebar-container/sidebar/el-asideel-mainapp-main/app-main/el-main/el-container/el-container
/template
script
import AppMain from ./appMain; // 页面布局的右侧区域
import sidebar from ./sideBar; // 页面布局的左侧菜单
import headerTemp from ./headerTemp; // 页面布局的header菜单
export default {name: layout,components: { sidebar, AppMain, headerTemp },data() {return {isShow: window.__MICRO_APP_ENVIRONMENT__, //判断当前是否在微前端环境如果在则是true 如果不在是undefined};},created() {console.log(isShow, this.isShow);},
};
/script
style
.el-header {padding: 0 !important;margin-left: 180px;
}
/style第二种方法子应用中添加一个非layout布局的空页面当子应用单独运行时指向layout布局页面如果是在微服务中使用则指向空页面在src/layout下创建EmptyLayout.vue
templatediv classemptyLayoutrouter-view /router-view/div
/template
style langscss scoped
.emptyLayout {height: 100%;
}
/style
在src\router\index.js下
//尝试微前端获取layout
function getComponent() {if (window.__MICRO_APP_ENVIRONMENT__) {console.log(进入了这里了嘛 微前端);return () import(/components/layout/EmptyLayout.vue);} else {return Layout;}
}component: getComponent(), //尝试微前端 总结
这里博主只是通过简单的两个项目进行微前端的搭建具体项目不便编写若有遇到的可以咨询博主有用的的铁子可以一键三联谢谢
