1、簡介

??微前端是一種架構(gòu)風(fēng)格，旨在通過將前端應(yīng)用程序拆分為更小、更可管理的部分，使多個團隊能夠獨立開發(fā)、部署和維護這些部分，從而實現(xiàn)前端的可擴展性和可維護性。
??MicroApp框架是京東出品的一種用于構(gòu)建微前端架構(gòu)的開源框架，旨在幫助開發(fā)者更好地構(gòu)建和管理復(fù)雜的前端應(yīng)用程序。

??京東MicroApp框架具有以下特點和功能：

1. 輕量級：框架本身體積小，加載速度快，不會給應(yīng)用程序帶來額外的負擔(dān)。
2. 插件化：支持插件機制，可以根據(jù)需要靈活添加和擴展功能。
3. 組件化：采用組件化的開發(fā)模式，方便開發(fā)者進行模塊化開發(fā)和復(fù)用。
4. 獨立部署：每個MicroApp都可以獨立部署和運行，支持單獨開發(fā)和測試。
5. 路由管理：提供路由管理功能，支持子應(yīng)用之間的路由跳轉(zhuǎn)和通信。
6. 狀態(tài)管理：提供狀態(tài)管理機制，允許不同子應(yīng)用之間共享數(shù)據(jù)和狀態(tài)。
7. 樣式隔離：采用樣式隔離的方式，確保每個子應(yīng)用之間的樣式不會相互干擾。

??使用京東MicroApp框架，開發(fā)者可以將復(fù)雜的前端應(yīng)用程序拆分為多個獨立的子應(yīng)用，每個子應(yīng)用可以由不同的團隊進行開發(fā)和維護，從而實現(xiàn)團隊間的解耦和獨立開發(fā)。同時，框架提供了一套完整的工具和規(guī)范，簡化了微前端架構(gòu)的搭建和管理過程。

詳細內(nèi)容可以前往官方文檔學(xué)習(xí)： 《官方文檔》。

2、入門示例

2.1、主應(yīng)用配置

??第一步，在package.json文件中引入MicroApp框架依賴，如下所示：

"dependencies": {
	"@micro-zoe/micro-app": "^0.8.11",
	"vue-router": "^3.5.1",
	   "core-js": "^2.6.5",
	   "vue": "^2.6.10"
	 },

也可以通過命令直接安裝“npm i @micro-zoe/micro-app@0.8.11 --save”

??第二步，修改main.js文件，完成初始化。

import Vue from 'vue'
import App from './App.vue'
import router from './router';
import microApp from '@micro-zoe/micro-app'

Vue.config.productionTip = false

microApp.start();

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

??第三步，創(chuàng)建路由及其頁面

??app.vue頁面修改（增加測試切換應(yīng)用的按鈕）：

<template>
  <div id="app">
	  <h1>主應(yīng)用</h1> 
		<router-link to="/micro-child/hello">跳轉(zhuǎn)子應(yīng)用 A</router-link>
	  	</br>
		<router-link to="/micro-child2/hello">跳轉(zhuǎn)子應(yīng)用 B</router-link> 
		<router-view/> 
  </div>
</template>

??子應(yīng)用的路由頁面：

<!--子應(yīng)用A-->
<template>
  <div>
    <h1>子應(yīng)用A</h1>
    <hr>
    <!--
      name(必傳)：應(yīng)用名稱
      url(必傳)：應(yīng)用地址，會被自動補全為http://localhost:3000/index.html
      baseroute(可選)：基座應(yīng)用分配給子應(yīng)用的基礎(chǔ)路由
     -->
    <micro-app name='micro-child' url='http://localhost:8081/' baseroute='/micro-child'></micro-app>
  </div>
</template>


<!-- 子應(yīng)用B  -->
<template>
  <div>
    <h1>子應(yīng)用B</h1>
    <hr>
    <!--
      name(必傳)：應(yīng)用名稱
      url(必傳)：應(yīng)用地址
      baseroute(可選)：基座應(yīng)用分配給子應(yīng)用的基礎(chǔ)路由，就是上面的 `/my-page`
     -->
    <micro-app name='micro-child2' url='http://localhost:8082/' baseroute='/micro-child2'></micro-app>
  </div>
</template>

??路由配置：

// 主程序 路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import MyPage from '../components/MyPage.vue'
import MyPage2 from '../components/MyPage2.vue'

Vue.use(VueRouter)

const routes = [
    {
        // ?? 非嚴(yán)格匹配，/my-page/* 都指向 MyPage 頁面
        path: '/micro-child/*', // vue-router@4.x path的寫法為：'/my-page/:page*'
        name: 'micro-child',
        component: MyPage,
    },{
        // ?? 非嚴(yán)格匹配，/my-page/* 都指向 MyPage 頁面
        path: '/micro-child2/*', // vue-router@4.x path的寫法為：'/my-page/:page*'
        name: 'micro-child2',
        component: MyPage2,
    }
]

const router = new VueRouter({
    mode: 'history',
    // ?? 設(shè)置基礎(chǔ)路由，子應(yīng)用可以通過window.__MICRO_APP_BASE_ROUTE__獲取基座下發(fā)的baseroute，如果沒有設(shè)置baseroute屬性，則此值默認(rèn)為空字符串
    base: '/',
    routes
})

export default router

2.2、子應(yīng)用配置

??子應(yīng)用就是普通的vue項目，配置該項目允許跨域支持就可以了。子應(yīng)用A和子應(yīng)用B配置一樣，我選擇其中一個進行記錄實現(xiàn)過程：

??頁面：

//app.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

//組件
<template>
  <div class="hello">
    Hello-Word,My name is APP A!
  </div>
</template>

??路由：

import VueRouter from 'vue-router';
import Hello from "../components/Hello.vue"
import Vue from "vue";

Vue.use(VueRouter)
const router = new VueRouter({
	mode: 'history',
    // ?? 設(shè)置基礎(chǔ)路由，子應(yīng)用可以通過window.__MICRO_APP_BASE_ROUTE__獲取基座下發(fā)的baseroute，如果沒有設(shè)置baseroute屬性，則此值默認(rèn)為空字符串
    base: window.__MICRO_APP_BASE_ROUTE__ || '/',
    routes:[
        {
            path: '/hello',
            name: 'hello',
            component: Hello,
        },
    ],
})

export default router;

??為了支持跨域，需要修改vue.config.js文件，增加如下內(nèi)容：

module.exports = {
  transpileDependencies: ["vue"],
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    }
  }
};

2.3、啟動項目

??啟動項目，首先啟動子項目，根據(jù)子項目地址，修改主應(yīng)用的子應(yīng)用路由中的配置頁面中的地址，然后啟動主應(yīng)用，訪問主應(yīng)用，頁面如下：

文章來源地址http://www.zghlxwxcb.cn/news/detail-526704.html

到了這里，關(guān)于微前端框架MicroApp入門學(xué)習(xí)筆記（一）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！