甘肃网站排名公司,房屋装修公司,品牌建设 厚植,软件设计师中级含金量1预期目标和场景
一个vue框架开发的应用#xff0c;需要使用另一个系统的页面。 通俗来说#xff0c;就是在一个web应用中独立的运行另一个web应用
2 技术支持
微前端处理方案#xff1a;无界 无界官网#xff1a; https://wujie-micro.github.io/doc/guide/
CSDN 参考…1预期目标和场景
一个vue框架开发的应用需要使用另一个系统的页面。 通俗来说就是在一个web应用中独立的运行另一个web应用
2 技术支持
微前端处理方案无界 无界官网 https://wujie-micro.github.io/doc/guide/
CSDN 参考文档
3 方案可行性测试
3.1项目技术
主系统绩效考核系统 vue2webpack 子系统可以是vue2 vue3 react 或angular
3.2案例测试 目标 vue2作为主系统展现子系统vue2中的页面并传值。 具体步骤 第一步主系统上安装无界插件
1. # vue2 框架
2. npm i wujie-vue2 -S
第二步 引入主系统 在main.js中引入
// 无界部分
import WujieVue from wujie-vue2;
Vue.use(WujieVue)const { setupApp} WujieVue;
setupApp({name: vue2,url:http://10.100.21.21:7200,exec: true,
});new Vue({el: #app,router,components: { App },template: App/
})
第三步 主系统新建一个页面 test.vue 并以props方式传值
template!--单例模式name相同则复用一个无界实例改变url则子应用重新渲染实例到对应路由 --
WujieVue
width100%
height100%
namevue2
:urlvue2Url
:synctrue
:props{ data: {page:我是主系统的参数,type:1} }
/WujieVue/templatescriptexport default {data() {return {vue2Url: http://10.100.21.21:7200,};},methods: {},};/scriptstyle langless scoped/style第四步 另一台电脑创建子系统vue2
main.js中配置
if (window.__POWERED_BY_WUJIE__) {let instance;window.__WUJIE_MOUNT () {const router new VueRouter({ base, routes });instance new Vue({ router, render: (h) h(App) }).$mount(#app);};window.__WUJIE_UNMOUNT () {instance.$destroy();};
} else {new Vue({ router: new VueRouter({ base, routes }), render: (h) h(App) }).$mount(#app);
}Vue.config配置跨域
// vue.config.js/*** type {import(vue/cli-service).ProjectOptions}*/
module.exports {publicPath: ./,devServer: {headers: {Access-Control-Allow-Origin: *,Access-Control-Allow-Headers: *,Access-Control-Allow-Methods: *,},port: 7200,},transpileDependencies: [sockjs-client,],
};App.vue中展示传值
最终测试效果
4 附注
本例测试了无界的核心功能引入页面和传值。其他功能和能力请参考无界官网API。 https://wujie-micro.github.io/doc/guide/ 目前无界子系统可以是目前主流前端vue,react angular12详见官网。
