micro-app-vue2 vue3 超详细快速入门指南学习记录

TaiXinF

已于 2022-04-02 22:40:05 修改

阅读量3.5k

点赞数

分类专栏：微前端文章标签：前端 vue.js npm node.js

于 2022-03-31 21:11:52 首次发布

本文链接：https://blog.csdn.net/Tx457973/article/details/123883577

版权

本文是micro-app的Vue2和Vue3快速入门指南，详细介绍了如何创建基座应用和子应用，包括配置路由、设置跨域支持、预加载等关键步骤，帮助开发者轻松接入微前端。

摘要由CSDN通过智能技术生成

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),
})