vue微服务架构（qiankun）（未完）

Myth丶恋晨 2023-03-13 13:52 9阅读 0赞

### 前言 ###

本教程采用 Vue 作为主应用基座，接入不同技术栈的微应用。如果你不懂 Vue 也没关系，我们在搭建主应用基座的教程尽量不涉及 Vue 的 API，涉及到 API 的地方都会给出解释。

> 注意：qiankun 属于无侵入性的微前端框架，对主应用基座和微应用的技术栈都没有要求。

我们在本教程中，接入了多技术栈 微应用 的 主应用 最终效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMyMTg0_size_16_color_FFFFFF_t_70]

### 构建主应用基座 ###

*  我们先使用 vue-cli 生成一个 Vue 的项目，初始化主应用。

将普通的项目改造成 qiankun 主应用基座，需要进行三步操作：

1.  创建微应用容器 - 用于承载微应用，渲染显示微应用；
2.  注册微应用 - 设置微应用激活条件，微应用地址等等；
3.  启动 qiankun；

### 创建微应用容器 ###

我们先在主应用中创建微应用的承载容器，这个容器规定了微应用的显示区域，微应用将在该容器内渲染并显示。  
我们先设置路由，路由文件规定了主应用自身的路由匹配规则，代码实现如下：

// micro-app-main/src/routes/index.ts
    import Home from "@/pages/home/index.vue";
    
    const routes = [
      { 
        /** * path: 路径为 / 时触发该路由规则 * name: 路由的 name 为 Home * component: 触发路由时加载 `Home` 组件 */
        path: "/",
        name: "Home",
        component: Home,
      },
    ];
    
    export default routes;
    
    // micro-app-main/src/main.ts
    //...
    import Vue from "vue";
    import VueRouter from "vue-router";
    
    import routes from "./routes";
    
    /** * 注册路由实例 * 即将开始监听 location 变化，触发路由规则 */
    const router = new VueRouter({ 
      mode: "history",
      routes,
    });
    
    // 创建 Vue 实例
    // 该实例将挂载/渲染在 id 为 main-app 的节点上
    new Vue({ 
      router,
      render: (h) => h(App),
    }).$mount("#main-app");

从上面代码可以看出，我们设置了主应用的路由规则，设置了 Home 主页的路由匹配规则。

我们现在来设置主应用的布局，我们会有一个菜单和显示区域，代码实现如下：

// micro-app-main/src/App.vue
    //...
    export default class App extends Vue { 
      /** * 菜单列表 * key: 唯一 Key 值 * title: 菜单标题 * path: 菜单对应的路径 */
      menus = [
        { 
          key: "Home",
          title: "主页",
          path: "/",
        },
      ];
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMyMTg0_size_16_color_FFFFFF_t_70]: /images/20230312/0e3bfba4559847a7a41d2f24e23e72bc.png