国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

微前端架構(gòu)-qiankun在vue3的應(yīng)用

2年前作者：銘碼分類：Toy博客閱讀(22)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了微前端架構(gòu)-qiankun在vue3的應(yīng)用。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

本文章介紹了qiankun在vue3的應(yīng)用，其中子應(yīng)用有vue2、vue3、react、angular

介紹

qiankun 是一個(gè)基于 single-spa 的微前端實(shí)現(xiàn)庫，旨在幫助大家能更簡(jiǎn)單、無痛的構(gòu)建一個(gè)生產(chǎn)可用微前端架構(gòu)系統(tǒng)。
其他幾款（[single-spa]、[micro-app]、[百度emp]]）

使用 iframe 整合系統(tǒng)時(shí)，假設(shè)我們有系統(tǒng) A, 當(dāng)我們想把系統(tǒng) B 引入 A 系統(tǒng)時(shí)，只需要 B 系統(tǒng)提供一個(gè) url 給 A 系統(tǒng)引用即可，這里我們把 A 系統(tǒng)叫做父應(yīng)用，把 B 系統(tǒng)叫做子應(yīng)用。同樣的，微前端也延續(xù)了這個(gè)概念，微前端在使用起來基本和使用 iframe 一樣平滑。

結(jié)構(gòu)

主應(yīng)用(父)，微應(yīng)用(子)

微前端架構(gòu)-qiankun在vue3的應(yīng)用

案例

一、主應(yīng)用

主應(yīng)用不限技術(shù)棧，只需要提供一個(gè)容器 DOM，然后注冊(cè)微應(yīng)用并 start 即可。

創(chuàng)建主應(yīng)用項(xiàng)目 -vue3


npm install @vue/cli -g
 
vue create qiankun-tast

在主應(yīng)用中安裝qiankun框架

$ yarn add qiankun # 或者 npm i qiankun -S

在主應(yīng)用中注冊(cè)微應(yīng)用

main.js：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'zone.js';

import { registerMicroApps } from 'qiankun';

registerMicroApps([
  // {
  //     name: "vue2App",
  //     props: { age: 10 }, //給子應(yīng)用傳數(shù)據(jù)
  //     entry: "http://localhost:3001", //默認(rèn)會(huì)加載這個(gè)html,解析里面的js,動(dòng)態(tài)執(zhí)行（子應(yīng)用必須支持跨域）里面,是用fetch去請(qǐng)求的數(shù)據(jù)
  //     container: "#out-main", //掛載到主應(yīng)用的哪個(gè)元素下
  //     activeRule: "/vue2", //當(dāng)我劫持到路由地址為/vue2時(shí)，我就把http://localhost:3000這個(gè)應(yīng)用掛載到#app-main的元素下
  // },
  {
    name: "vueChildOne",
    entry: "http://localhost:3001",
    container: "#child-vue3-one-content",
    activeRule: "/child-one",
  },
  {
    name: "vueChildTwo",
    entry: "http://localhost:3002",
    container: "#child-vue3-two-content",
    activeRule: "/child-two",
  },
  {
    name: "vue2Child",
    entry: "http://localhost:3003",
    container: "#child-vue2-one-content",
    activeRule: "/child-vue2-one",
  },
  {
    name: "reactApp1",
    entry: "http://localhost:4001",
    container: "#child-react-one-content",
    activeRule: "/child-react-one",
  },
  {
    name: "angularApp1",
    entry: "http://localhost:4200",
    container: "#child-angular-one-content",
    activeRule: "/child-angular-one",
  },
]);

// setDefaultMountApp('/child-one')

// 啟動(dòng) qiankun
// start();

createApp(App).use(ElementPlus).use(router).mount('#app-base')

App.vue

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-menu>
          <el-menu-item index="1">
            <el-icon><icon-menu /></el-icon>
            <span @click="goHome">首頁</span>
          </el-menu-item>
          <el-menu-item index="2">
            <el-icon><icon-menu /></el-icon>
            <span @click="$router.push('/child-one')">child-vue3-one</span>
          </el-menu-item>
          <el-menu-item index="3">
            <el-icon><document /></el-icon>
            <span @click="$router.push('/child-two')">child-vue3-one</span>
          </el-menu-item>
          <el-menu-item index="4">
            <el-icon><document /></el-icon>
            <span @click="$router.push('/child-vue2-one')">child-vue2-one</span>
          </el-menu-item>
          <el-menu-item index="5">
            <el-icon><document /></el-icon>
            <span @click="$router.push('/child-react-one')">child-react-one</span>
          </el-menu-item>
          <el-menu-item index="6">
            <el-icon><document /></el-icon>
            <span @click="$router.push('/child-angular-one')">child-angular-one</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main> <router-view></router-view></el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  methods: {
    // 跳轉(zhuǎn)頁面方法

    goHome() {
      this.$router.push("/");
    },
  },
};
</script>

<style>
.bens {
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 15px;
  left: 0;
  z-index: 9999999;
}
#app-base {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

index.html：

// 將id：app 改為 app-base  自定義就行，只要與main.js對(duì)應(yīng)起來，切不與微應(yīng)用重復(fù)
<div id="app-base"></div>

router.js

import { createRouter, createWebHistory } from "vue-router";

// 2. 配置路由
const routes = [
  {
    path: "/",
    name: "home",
    component: () => import("@/views/home/index.vue"),
  },
  {
    path: "/child-one",
    component: () => import("@/views/childOne/index.vue"),
  },
  {
    path: "/child-two",
    component: () => import("@/views/childTwo/index.vue"),
  },
  {
    path: "/child-vue2-one",
    component: () => import("@/views/childVue2One/index.vue"),
  },
  {
    path: "/child-react-one",
    component: () => import("@/views/childReactOne/index.vue"),
  },
  {
    path: "/child-angular-one",
    component: () => import("@/views/childAgOne/index.vue"),
  },
];
// 1.返回一個(gè) router 實(shí)列，為函數(shù)，里面有配置項(xiàng)（對(duì)象） history
const router = createRouter({
    mode: 'history',
    history: createWebHistory(),
    routes,
});

// 3導(dǎo)出路由   然后去 main.ts 注冊(cè) router.ts
export default router

vue3子應(yīng)用

創(chuàng)建項(xiàng)目

// 選擇vue3這個(gè)版本
vue create child-one

在 src 目錄新增 public-path.js
解決靜態(tài)文件跨域

// src/public-path.js
if(window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

修改路由文件，建議使用history 模式的路由，并設(shè)置路由 base，值和它的 activeRule 是一樣的。

import { createRouter, createWebHashHistory, createWebHistory } from "vue-router";

// 2. 配置路由
const routes = [
    {
        path: '/',
        component: () => import('@/views/home/index.vue'),
    },
    {
        path: '/about',
        component: () => import('@/views/about/index.vue'),
    },

];
// 1.返回一個(gè) router 實(shí)列，為函數(shù)，里面有配置項(xiàng)（對(duì)象） history
const router = createRouter({
    mode: 'history',
    base: window.__POWERED_BY_QIANKUN__ ? "/child-one" : "/",
    history: createWebHashHistory('/child-one'),
    routes,
});

// 3導(dǎo)出路由   然后去 main.ts 注冊(cè) router.ts
export default router

入口文件 main.js 修改，為了避免根 id #app 與其他的 DOM 沖突，需要限制查找范圍。并導(dǎo)出三個(gè)生命周期函數(shù)。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import './public-path'

// createApp(App).mount('#app')

let instance = null;
function render(props = {}) {
  if (instance) return;
  const { container } = props;
  console.log(container);
  instance = createApp(App)
    .use(router)
    .mount(container ? container.querySelector("#app-child-one") : "#app-child-one");
}

// 獨(dú)立運(yùn)行時(shí)
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log("[vue] vue app bootstraped");
}
export async function mount(props) {
  console.log("[vue] props from main framework", props);
  render(props);
}
export async function unmount() {
  //可選鏈操作符
  instance.$destroy?.();
  instance = null;
}

主應(yīng)用容器子應(yīng)用
qiankun-test/src/views/childOne/index.vue

<template>
  <h2>我是子應(yīng)用 vue3-one</h2>
  <div id="child-vue3-one-content"></div>
</template>

<script>
import { start } from "qiankun";
export default {
  name: "childOne",
  components: {},
  mounted() {
    if (!window.qiankunStarted) {
      window.qiankunStarted = true;
      start();
    }
  },
};
</script>

<style>
</style>

運(yùn)行效果如下：

微前端架構(gòu)-qiankun在vue3的應(yīng)用

vue2子應(yīng)用-child-vue2

微前端架構(gòu)-qiankun在vue3的應(yīng)用

childVue2One/index.vue

<template>
  <h2>我是微應(yīng)用vue2項(xiàng)目</h2>
  <div id="child-vue2-one-content"></div>
</template>

<script>
import { start } from "qiankun";
export default {
  name: "vueChild",
  components: {},
  mounted() {
    this.$nextTick(() => {
      if (!window.qiankunStarted) {
        window.qiankunStarted = true;
        start();
      }
    });
  },
};
</script>

<style>
</style>

微應(yīng)用配置child-vue2

src下創(chuàng)建public-path.js


if (window.__POWERED_BY_QIANKUN__) {
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

main.js

// src/main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import "./public-path";
 
Vue.config.productionTip = false
 
// 定義一個(gè)Vue實(shí)例
let instance = null
// 渲染方法
function render(props = {}) {
  const { container } = props
  instance = new Vue({
    router,
    render: (h) => h(App)
  }).$mount(container ? container.querySelector('#app'): '#app')
}
// 獨(dú)立運(yùn)行時(shí)
if(!window.__POWERED_BY_QIANKUN__) {
  render()
}
//暴露主應(yīng)用生命周期鉤子
/**
 * bootstrap ： 在微應(yīng)用初始化的時(shí)候調(diào)用一次，之后的生命周期里不再調(diào)用
 */
export async function bootstrap() {
  console.log('vue2-app bootstraped');
}
/**
 * mount ： 在應(yīng)用每次進(jìn)入時(shí)調(diào)用
 */
export async function mount(props) {
  console.log('vue2-app mount', props);
  render(props);
}
/**
 * unmount ：應(yīng)用每次 切出/卸載 均會(huì)調(diào)用
 */
export async function unmount() {
  console.log("vue2-app unmount")
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
}

vue.config.js

module.exports = {
    lintOnSave: false,
    devServer: {
        port: "3003",
        headers: {
            "Access-Control-Allow-Origin": "*", //所有人都可以訪問我的服務(wù)器
        },
    },
    configureWebpack: {
        output: {
            // library: `${name}-[name]`,
            library: `vueChildOne`,
            libraryTarget: "umd", // 把微應(yīng)用打包成 umd 庫格式
            // jsonpFunction: `webpackJsonp_${name}`,
        },
    },
};

router.js

import { createRouter, createWebHashHistory, createWebHistory } from "vue-router";

// 2. 配置路由
const routes = [
    {
        path: '/',
        component: () => import('@/views/home/index.vue'),
    },
    {
        path: '/about',
        component: () => import('@/views/about/index.vue'),
    },

];
// 1.返回一個(gè) router 實(shí)列，為函數(shù)，里面有配置項(xiàng)（對(duì)象） history
const router = createRouter({
    mode: 'history',
    base: window.__POWERED_BY_QIANKUN__ ? "/child-one" : "/",
    history: createWebHashHistory('/child-one'),
    routes,
});

// 3導(dǎo)出路由   然后去 main.ts 注冊(cè) router.ts
export default router

vue2錯(cuò)誤問題

路由版本不對(duì)

微前端架構(gòu)-qiankun在vue3的應(yīng)用

下載指定版本在3*的就行

react子應(yīng)用

微前端架構(gòu)-qiankun在vue3的應(yīng)用

問題

當(dāng)修改入口文件index.tsx之后，主要是添加了qiankun的生命周期之后，報(bào)錯(cuò)

– You need to export lifecycle functions in reactApp1 entry

明明我已經(jīng)寫了生命周期但是沒有生效。
問題出在：官方問題使用的js語法，我使用的是ts語法。
解決：用react-app-rewired方案復(fù)寫webpack就可以了。作用：通過react-app-rewired插件,react-app-rewired的作用就是在不eject的情況下,覆蓋create-react-app的配置.

angular子應(yīng)用

angular由于在國內(nèi)用的不多所以我是按照官方教程完成的，當(dāng)然中間出了很多狗血的錯(cuò)誤

官方：以 Angular-cli 9 生成的 angular 9 項(xiàng)目為例，其他版本的 angular 后續(xù)會(huì)逐漸補(bǔ)充。
這句話就是一個(gè)坑，首先我自己原有的angular版本是12，用 ng 命令安裝的項(xiàng)目就是最新的了。這個(gè)導(dǎo)致我安裝官方操作一直沒有成功，不斷報(bào)錯(cuò)。------我放棄了，做個(gè)乖孩子，用angular9

由于不能降低電腦全局版本，于是我在本項(xiàng)目中安裝了一個(gè)angular-cli9

npm install  @angular/cli@9.0.1
ng new child-angular1

版本搞成了9那就好辦了

根據(jù)要求配置好主應(yīng)用的main.js與App.vue文件
在主應(yīng)用views創(chuàng)建anguale的容器.vue文件
配置主應(yīng)用路由
然后就是根據(jù)qiankun的文檔配置文件了

注意：在qiankun的文檔中第二步,child-angular-one這個(gè)是和主應(yīng)用配置路由一致
設(shè)置 history 模式路由的 base，src/app/app-routing.module.ts 文件：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { APP_BASE_HREF } from '@angular/common';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  // @ts-ignore
  // child-angular-one 必須和主路由向?qū)?yīng)
  providers: [{ provide: APP_BASE_HREF, useValue: window.__POWERED_BY_QIANKUN__ ? '/child-angular-one' : '/' }]
})
export class AppRoutingModule { }

gitee地址：qiankun-vue3文章來源地址http://www.zghlxwxcb.cn/news/detail-404124.html

到了這里，關(guān)于微前端架構(gòu)-qiankun在vue3的應(yīng)用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

微前端qiankun架構(gòu) (基于vue2實(shí)現(xiàn))使用教程
node -- 16+ @vue/cli -- 5+ 創(chuàng)建文件夾qiankun-test。使用vue腳手架創(chuàng)建主應(yīng)用main和子應(yīng)用dev ? 安裝 qiankun: 使用qiankun：在 utils 內(nèi)創(chuàng)建微應(yīng)用文件夾 microApp,在該文件夾內(nèi)創(chuàng)建微應(yīng)用出口文件 index.js，路由文件 microAppRouter,配置函數(shù)文件 microAppSetting。路由文件 microAppRouter 配置函數(shù)文件
2023年04月19日
瀏覽(26)
qiankun：react18主應(yīng)用 + 微應(yīng)用 react18 + vue3
一：主應(yīng)用搭建react項(xiàng)目安裝Antd 在 index.js中引入安裝react-router ：在 index.js中引入安裝 qiankun ：在主應(yīng)用中注冊(cè)微應(yīng)用，在 index.js中引入注：子應(yīng)用嵌入到主應(yīng)用的地方，id要跟index.js下registerMicroApps里面的container設(shè)置一致修改App.js文件，將如下代碼放入App.js 修改App.css樣
2024年02月16日
瀏覽(43)
使用vite-plugin-qiankun插件，將應(yīng)用快速接入乾坤（vue3 vite）
qiankun官網(wǎng) vite-plugin-qiankun插件github地址：vite-plugin-qiankun 1、安裝乾坤 2、在主應(yīng)用中注冊(cè)微應(yīng)用（main.ts） 3、掛載在App.vue掛載微應(yīng)用節(jié)點(diǎn) 1、安裝插件 qiankun目前是不支持vite的，需要借助插件完成 2、修改vite.config.ts 3、修改main.ts
2024年02月13日
瀏覽(33)
【幾乎最全/全網(wǎng)最長(zhǎng)的 2 萬字】前端工程化完整流程：從頭搭到尾（vue3 + vite + qiankun + docker + tailwindcss + iview......）
使用 Vite + Vue3 + Typescript + axios + echarts + pinia + view-ui-plus + vue-router + less + sass + scss + css + tailwindcss + animate.css + vite-svg-loader + postcss + stylelint + eslint + prettier + autoprefixer + commitizen + commitlint + vite-plugin-compression + vite-plugin-qiankun + Docker + nginx.conf…等等插件，帶你從 0 開始一步一步搭
2024年02月12日
瀏覽(31)
Vue3.2 + TypeScript + Pinia + Vite4 + Element-Plus + 微前端（qiankun）后臺(tái)管理系統(tǒng)模板（已開源---顯示項(xiàng)目頁面截圖）
Wocwin-Admin，是基于 Vue3.2、TypeScript、Vite、Pinia、Element-Plus、Qiankun(微前端) 開源的一套后臺(tái)管理模板；同時(shí)集成了微前端 qiankun也可以當(dāng)做一個(gè)子應(yīng)用。項(xiàng)目中組件頁面使用了Element-plus 二次封裝 t-ui-plus 組件，目前已新增fastmock接口。 Link：https://wocwin.github.io/wocwin-admin/ 賬號(hào)：
2024年02月08日
瀏覽(40)
【qiankun】前端微服務(wù)架構(gòu)踩坑記錄
目錄前言 1.Cannot GET /cooperation/board 場(chǎng)景：分析解決 2.Invalid options in vue.config.js:\\\"css.requireModuleExtension\\\" is not allowed 原因解決 3.less版本升級(jí)導(dǎo)致除法寫法未轉(zhuǎn)換原因解決 4.主子應(yīng)用樣式隔離場(chǎng)景解決 5.在webpack5中配置output報(bào)錯(cuò) 報(bào)錯(cuò)如下 ?原因 ?解決 6.微應(yīng)用部署后報(bào)錯(cuò) 場(chǎng)景
2024年02月15日
瀏覽(21)
前端vue3+typescript架構(gòu)
1、vue creat 項(xiàng)目名稱選擇自定義 ?選擇需要的依賴 ?選擇vue3 ?一路enter，選擇eslist+prettier ?繼續(xù)enter，等待安裝按步驟操作，項(xiàng)目啟動(dòng)成功 ?2、vscode安裝5款插件 ?2、代碼保存自動(dòng)格式化，保證每個(gè)開發(fā)人員代碼一致，根目錄新建三個(gè)文件.editorconfig和.prettierrc和.prettierignore
2024年02月11日
瀏覽(32)
vue項(xiàng)目集成乾坤(qiankun)微前端
npm i qiankun -S qiankun文檔官方地址：https://qiankun.umijs.org/zh/guide 新建一個(gè).vue文件配置路由地址
2024年02月05日
瀏覽(25)
前端新手Vue3+Vite+Ts+Pinia+Sass項(xiàng)目指北系列文章 —— 第一章技術(shù)棧簡(jiǎn)介 (開篇)
旨在幫助初學(xué)者掌握使用現(xiàn)代前端技術(shù)棧構(gòu)建應(yīng)用的基礎(chǔ)知識(shí)和技能。在這個(gè)系列中，我們將深入探討如何結(jié)合Vue.js、Vite、TypeScript、Pinia和Sass這些強(qiáng)大的工具和框架來開發(fā)現(xiàn)代化的前端應(yīng)用。通過這個(gè)系列，我們將從零開始構(gòu)建一個(gè)完整的前端項(xiàng)目，覆蓋項(xiàng)目初始化、組件
2024年02月05日
瀏覽(30)
前端測(cè)試指南：Vue3 測(cè)試工具介紹與使用
1.1 前端測(cè)試的重要性在現(xiàn)代前端開發(fā)中，測(cè)試已經(jīng)成為了必不可少的一環(huán)。測(cè)試可以保證代碼的質(zhì)量、可維護(hù)性和可靠性，防止代碼的潛在錯(cuò)誤和漏洞。同時(shí)，測(cè)試可以讓開發(fā)者更加自信地提交代碼和合并代碼，以及更快地解決問題。因此，測(cè)試已經(jīng)成為了前端開發(fā)中不可
2024年02月10日
瀏覽(60)