Loading...
墨滴
N

Nic

2021/12/31  阅读:133  主题:橙心

micro-app-vue 快速入门指南

简介

micro-app是京东零售推出的一款微前端框架,它基于类WebComponent进行渲染,从组件化的思维实现微前端,旨在降低上手难度、提升工作效率。它是目前接入微前端成本最低的框架,并且提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。

micro-app与技术栈无关,对前端框架没有限制,任何框架都可以作为基座应用嵌入任何类型的子应用。

快速开始

1. 基座应用

//初始化一个vue应用
vue create main-vue

//安装 @micro-zoe/micro-app 依赖
npm i @micro-zoe/micro-app --save
//

入口添加

// main.js

import Vue from "vue";
import App from "./App.vue";
import routes from "./router";
import VueRouter from "vue-router";
import microApp from "@micro-zoe/micro-app";

Vue.config.productionTip = false;

microApp.start();

const router = new VueRouter({
  mode"history",
  // 设置主应用基础路由为main-vue(用于后续部署),则子应用基础路由(baseroute)为/main-vue/xxx
  base: process.env.BASE_URL,
  routes,
});

new Vue({
  router,
  render(h) => h(App),
}).$mount("#app");

分配一个路由给子应用(viewsx新建my-page.vue)

import Vue from "vue";
import VueRouter from "vue-router";
import MyPage from "../views/my-page.vue";

Vue.use(VueRouter);

const routes = [
  {
    // 👇 非严格匹配,/my-page/* 都指向 MyPage 页面
    path"/my-page/*",
    name"my-page",
    component: MyPage,
  },
];

export default routes;

页面中嵌入子应用

<!-- my-page.vue -->
<template>
  <div>
    <h1>子应用</h1>
    <!-- 
      name(必传):应用名称
      url(必传):应用地址,会被自动补全为http://localhost:3000/index.html
      baseroute(可选):基座应用分配给子应用的基础路由,就是上面的 `/my-page`
     -->

    <micro-app name='app1' url='http://localhost:3000/' baseroute='/my-page'></micro-app>
  </div>
</template>

到此主应用配置完成

2.子应用

//初始化一个vue应用
vue create child-vue

设置跨域支持(根目录新增vue.config.js)

module.exports = {
  devServer: {
    port: 3000,
    headers: {
      "Access-Control-Allow-Origin""*",
    },
  },
};

修改路由配置

//router.js
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
];

export default routes;

设置基础路由

//main.js
import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";
import routes from "./router";

Vue.config.productionTip = false;

const router = new VueRouter({
  mode: "history",
  // 👇 __MICRO_APP_BASE_ROUTE__ 为micro-app传入的基础路由
  base: window.__MICRO_APP_BASE_ROUTE__ || process.env.BASE_URL,
  routes,
});

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

设置 publicPath (src新建public-path.js)

//public-path.js
// __MICRO_APP_ENVIRONMENT__和__MICRO_APP_PUBLIC_PATH__是由micro-app注入的全局变量
if (window.__MICRO_APP_ENVIRONMENT__) {
  // eslint-disable-next-line
  __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__
}

main.js 引入public-path.js

//main.js
import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";
import routes from "./router";
import "./public-path";

Vue.config.productionTip = false;

const router = new VueRouter({
  mode"history",
  // 👇 __MICRO_APP_BASE_ROUTE__ 为micro-app传入的基础路由
  basewindow.__MICRO_APP_BASE_ROUTE__ || process.env.BASE_URL,
  routes,
});

new Vue({
  router,
  render(h) => h(App),
}).$mount("#app");

监听卸载

// main.js
import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";
import routes from "./router";
import "./public-path";

Vue.config.productionTip = false;

const router = new VueRouter({
  mode"history",
  // 👇 __MICRO_APP_BASE_ROUTE__ 为micro-app传入的基础路由
  basewindow.__MICRO_APP_BASE_ROUTE__ || process.env.BASE_URL,
  routes,
});

const app = new Vue({
  router,
  render(h) => h(App),
}).$mount("#app");

// 监听卸载操作
window.addEventListener("unmount"function ({
  app.$destroy();
});

运行

分别跑起两个应用 浏览器输入http://localhost:8080/my-page/

记得最后一个斜杠一定要写(不要问我为什么知道)

demo

https://github.com/NicCraver/micro-app-vue-demo

N

Nic

2021/12/31  阅读:133  主题:橙心

作者介绍

N
Nic