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.jsimport 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/xxxbase: 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 = [{// 												


											

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

    
								
  1. 腾讯待办怎么用？来看看这篇超详细的入门指南
		
    不知道腾讯待办怎么用?这篇超详细的入门指南将从创建待办.分享待办.订阅待办三个方面带你快速入门,一起来学习下吧! 01 创建待办/分组 如何快速创建待办 1.通过小程序/APP创建 打开小程序或APP ...
    
		
    2. 
						
  2. 超详细快速入门JavaScript详解(一)
		
    目录 一. JS概述&入门 二.JS组成 三. JS引入方式 四. JS-注释 五.JS-变量 1.基本数据类型 2.引用数据类型 一. JS概述&入门 我们为什么要学习JS?: 为了 ...
    
		
    3. 
						
  3. 它号称 Python 中性能最高的异步 Web 框架：超详细 Sanic 入门指南！
		
    △点击上方"Python猫"关注 ,回复"2"加入交流群 作者:古明地盆 来源:https://www.cnblogs.com/traditional/p/14 ...
    
		
    4. 
						
  4. 超详细 Vagrant 入门指南，建议收藏
		
    搭建 Linux 虚拟机,别再用 VirtualBox 从 .iso 文件安装了. 概述 2020 年了,也许你已经习惯了 docker,习惯了在 XX 云上快速创建云主机,但是如果你想在个人电脑上安 ...
    
		
    5. 
						
  5. BERT模型超酷炫，上手又太难？请查收这份BERT快速入门指南！
		
    点击上方"AI遇见机器学习",选择"星标"公众号 重磅干货,第一时间送达 来自 | GitHub    作者 | Jay Alammar 转自 | 机器之心 如 ...
    
		
    6. 
						
  6. BERT模型超酷炫，上手又太难？请查收这份BERT快速入门指南
		
    2019-12-31 10:50:59 选自GitHub 作者:Jay Alammar 参与:王子嘉.Geek AI 如果你是一名自然语言处理从业者,那你一定听说过最近大火的 BERT 模型.本文是一 ...
    
		
    7. 
						
  7. 超强、超详细Redis入门教程【转】
		
    这篇文章主要介绍了超强.超详细Redis入门教程,本文详细介绍了Redis数据库各个方面的知识,需要的朋友可以参考下 [本教程目录] 1.redis是什么 2.redis的作者何许人也 3.谁在使用r ...
    
		
    8. 
						
  8. iOS App打包上架超详细流程1
		
    iOS App打包上架超详细流程(手把手图文教你) 转载: http://www.jianshu.com/p/817686897ec1?open_source=weibo_search 一.前言: 作 ...
    
		
    9. 
						
  9. 超详细Redis入门教程——Redis命令（下）
		
    前言 本文小新为大家带来 超详细Redis入门教程--Redis命令 相关知识,具体内容包括简单动态字符串 SDS,集合的底层实现原理,BitMap 操作命令,HyperLogLog 操作命令,Geo ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. 吴恩达神经网络和深度学习——第二周笔记
		
    2. 
						
  2. 基于复杂方案OWSAP CsrfGuard的CSRF安全解决方案（适配nginx + DWR）
		
    3. 
						
  3. CopyCat 代码克隆检测发布，剑指开源软件抄袭
		
    4. 
						
  4. 【实验】配置DHCP和NAT访问Internet公网案例
		
    5. 
						
  5. python手机端自动点赞_python自动点赞功能的实现思路
		
    6. 
						
  6. java 发送qq消息_php发送qq消息
		
    7. 
						
  7. 单板机 单片机 c语言,单板机 单片机 个人计算机有什么区别吗
		
    8. 
						
  8. 汇编语言程序设计，计算比赛成绩
		
    9. 
						
  9. python文本相似度分析_文本相似度分析（基于jieba和gensim）
		
    10. 
						
  10. 笑傲江湖手3D游服务器端文件,新笑傲江湖手游7月2日部分服务器数据互通预告...
		
    11. 
						
  11. 【切图】门户网首页模板一 (类似CSDN)
		
    12. 
						
  12. Google 也要“勒紧腰带”过日子了！
		
    13. 
						
  13. 《Core Java  课件》Day02
		
    14. 
						
  14. 方法Method（Java）
		
    15. 
						
  15. lol游戏挂机软件_“本不想挂机，但系统不让重连！”LOL成“挂机联盟”，5局3挂机...
		
    16. 
						
  16. 华为NP课程笔记4-中间系统到中间系统
		
    17. 
						
  17. 一些网站后台模板源码分析
		
    18. 
						
  18. ODAC安装配置与使用详解
		
    19. 
						
  19. 2021年的4个开源对象存储平台
		
    20. 
						
  20. win10 高分屏显示模糊的解决办法
		
    21. 
		

	


热门文章
	

    
									
  1. （转）流量加速插件 FinalSpeed介绍及一键安装教程
			
    2. 
						
  2. 用于视觉问答的基于关系推理和注意力的多峰特征融合模型《Multimodal feature fusion by relational reasoning and attention for VQA》
			
    3. 
						
  3. Python3 HyperLPR 中文车牌识别
			
    4. 
						
  4. 辅助写作软件：PPT写作助手 帮助创作多图少字文章
			
    5. 
						
  5. Kotlin 学习笔记（二）—— 数据类、密闭类、循环写法以及常用集合操作符
			
    6. 
						
  6. 史上最全MOS管封装管脚外观解读，新手必读！
			
    7. 
						
  7. 单片机连接MySQL数据库
			
    8. 
						
  8. 《Mysql是怎样运行的》读书笔记之成本的优化
			
    9. 
						
  9. 普冉PY32系列(三) PY32F002A 资源实测 - 这个型号不简单
			
    10. 
						
  10. 手机生产日期查询方法
			
    11.