• 微前端无界 项目使用记录


    1预期目标和场景

    一个vue框架开发的应用,需要使用另一个系统的页面。
    通俗来说,就是在一个web应用中独立的运行另一个web应用

    2 技术支持

    微前端处理方案:无界
    无界官网: https://wujie-micro.github.io/doc/guide/

    CSDN 参考文档

    3 方案可行性测试

    3.1项目技术

    主系统:绩效考核系统 vue2+webpack
    子系统可以是vue2 vue3 react 或angular

    3.2案例测试
    目标
    vue2作为主系统,展现子系统vue2中的页面,并传值。
    具体步骤
    第一步:主系统上安装无界插件

    1.	# vue2 框架
    2.	npm i wujie-vue2 -S
    
    
    • 1
    • 2
    • 3

    第二步 引入主系统 在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: ''
    })
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    第三步 主系统新建一个页面 test.vue
    并以props方式传值

    <template>
        <!--单例模式,name相同则复用一个无界实例,改变url则子应用重新渲染实例到对应路由 -->
    <WujieVue 
    width="100%" 
    height="100%" 
    name="vue2" 
    :url="vue2Url" 
    :sync="true" 
    :props="{ data: {page:'我是主系统的参数',type:1} }">>
    </WujieVue>
      </template>
      
      <script>
      export default {
        data() {
          return {
            vue2Url: "http://10.100.21.21:7200",
          };
        },
        methods: {
        },
      };
      </script>
      
      <style lang="less" scoped></style>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    第四步 另一台电脑创建子系统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");
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    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",
      ],
    };
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    App.vue中,展示传值
    在这里插入图片描述

    最终测试效果
    在这里插入图片描述

    4 附注

    本例测试了无界的核心功能,引入页面,和传值。其他功能和能力,请参考无界官网API。
    https://wujie-micro.github.io/doc/guide/
    目前无界子系统,可以是目前主流前端vue,react angular12,详见官网。

  • 相关阅读:
    KMP算法
    Mac(含M1) 使用 brew 安装nvm
    使用C#窗体绘制动态曲线图
    C6657 GPIO16~31中断配置
    神经网络在通信中的应用,神经网络及其应用
    MySQL 锁的内存结构
    实验二 图像增强
    真正解决jellyfin硬解码转码
    [algorithm] 二叉树的DFS与BFS算法 (Java) -- 痛定思痛 彻底搞懂
    微信小程序:CC通用成绩查询小程序
  • 原文地址:https://blog.csdn.net/lyxkgc/article/details/133314791