微前端 ---- wujie-vue3 原理

最新推荐文章于 2024-07-31 19:54:33 发布
最新推荐文章于 2024-07-31 19:54:33 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： 微前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63358859/article/details/134825626
版权

目录

 前言

设置子应用​

预加载​

启动子应用​

封装 

1.创建文件

2.安装依赖

3.编写组件

4.配置打包规则

5.执行打包命令 

 swc技术

SWC

Babel

 Babel VS SWC

更改使用 swc 解析 

 使用swc 完成 esm 模式  （export--import）

发布到npm

更改package.json

创建npm账户

登录npm

切换npm源

发布到npm

 前言

这个包其实是作者根据wujie 自行封装的我们也可以自己去封装一下

设置子应用​

非必须，由于preloadApp和startApp参数重复，为了避免重复输入，可以通过setupApp来设置默认参数。

  • name: "唯一id",
  • url: "子应用地址",
  •  el: "容器", 
setupApp({ name: "唯一id", url: "子应用地址", exec: true, el: "容器", sync: true })

预加载​

javascript

preloadApp({ name: "唯一id"});

启动子应用​

javascript

startApp({ name: "唯一id" });

 知道以上几个API的用法就可以简单封装一个无界的组件我们使用vue3 + webpack + swc 封装

封装 

1.创建文件

  • index.ts 入口文件
  • type.ts类型文件
  • index.d.ts 类型声明文件
pnpm init  生成package.json
tsc --init 生成tsconfig.json
创建webpack.config.js

2.安装依赖

pnpm i wujie   
pnpm i vue -D   
pnpm i webpack-cli -D
pnpm i typescript -D 
pnpm i ts-loader  -D 
pnpm i webpack -D

3.编写组件

声明文件

// import { bus, preloadApp, destroyApp, setupApp } from "wujie";
import type { App } from 'vue';

declare const WujieVue: {
    // bus: typeof bus;
    // setupApp: typeof setupApp;
    // preloadApp: typeof preloadApp;
    // destroyApp: typeof destroyApp;
    install: (app: App) => void
};

export default WujieVue;

 

类型文件

import type { plugin } from 'wujie'
type lifecycle = (appWindow: Window) => any;
interface Props {
    /** 唯一性用户必须保证 */
    name: string;
    /** 需要渲染的url */
    url: string;
    /** 需要渲染的html, 如果用户已有则无需从url请求 */
    html?: string;
    /** 渲染的容器 */
    loading?: HTMLElement;
    /** 路由同步开关， false刷新无效，但是前进后退依然有效 */
    sync?: boolean;
    /** 子应用短路径替换，路由同步时生效 */
    prefix?: { [key: string]: string };
    /** 子应用保活模式，state不会丢失 */
    alive?: boolean;
    /** 注入给子应用的数据 */
    props?: { [key: string]: any };
    /** js采用fiber模式执行 */
    fiber?: boolean;
    /** 子应用采用降级iframe方案 */
    degrade?: boolean;
    /** 自定义运行iframe的属性 */
    attrs?: { [key: string]: any };
    /** 自定义降级渲染iframe的属性 */
    degradeAttrs?: { [key: string]: any };
    /** 代码替换钩子 */
    replace?: (codeText: string) => string;
    /** 自定义fetch，资源和接口 */
    fetch?: (input: RequestInfo, init?: RequestInit) => Promise<Response>;
    /** 子应插件 */
    plugins: Array<plugin>;
    /** 子应用生命周期 */
    beforeLoad?: lifecycle;
    /** 没有做生命周期改造的子应用不会调用 */
    beforeMount?: lifecycle;
    afterMount?: lifecycle;
    beforeUnmount?: lifecycle;
    afterUnmount?: lifecycle;
    /** 非保活应用不会调用 */
    activated?: lifecycle;
    deactivated?: lifecycle;
};

export { Props }

组件封装

这段代码是一个Vue组件的封装，它使用了Vue 3的Composition API来定义组件。让我来解释一下它的功能和结构

首先，我们需要了解一下这个组件的功能。这个组件是一个封装了微前端框架wujie的Vue组件，它可以在Vue应用中加载其他独立的微前端应用。它接受一些props作为配置参数，包括组件的宽度、高度、名称、URL等。它还提供了一些生命周期钩子函数，用于在组件加载、卸载和切换时执行一些操作。

接下来，让我们来看一下这个组件的代码结构。

首先，我们引入了Vue的一些函数和类型，包括defineComponent、h、getCurrentInstance等。这些函数和类型将在后面的代码中使用。

然后，我们定义了一个名为wujie的组件，使用defineComponent函数来创建组件。在props选项中，我们定义了组件的props，包括宽度、高度、名称、URL等。其中，一些props的类型是复杂的，我们使用PropType来进行强制类型转换，以确保传入的props符合预期的类型。

在setup函数中，我们定义了组件的逻辑。首先，我们定义了一个init函数，用于初始化微前端应用。在这个函数中，我们使用startApp函数来启动微前端应用，传入一些配置参数，包括应用的名称、URL、加载元素等。

接下来，我们定义了一个handleEmit函数，用于处理事件的触发和参数的传递。在这个函数中，我们使用emit函数来触发事件，并将参数传递给事件的监听函数。

然后，我们使用onMounted钩子函数，在组件挂载后执行一些操作。在这个钩子函数中，我们使用bus.$onAll函数来监听所有事件的触发，并将事件和参数传递给handleEmit函数。然后，我们调用init函数来初始化微前端应用。

接下来，我们使用watch函数来监听props.name和props.url的变化。当这两个props发生变化时，我们重新调用init函数来重新初始化微前端应用。

最后，我们使用onBeforeMount钩子函数，在组件卸载前执行一些操作。在这个钩子函数中，我们使用bus.$offAll函数来取消所有事件的监听。

最后，我们返回一个渲染函数，使用h函数来创建一个div元素，并将宽度和高度设置为props中的值。我们还将这个div元素的引用设置为wujie，以便以后可以访问它。

最后，我们通过wujie.install方法将这个组件注册为Vue插件，以便在Vue应用中使用。

import { defineComponent, h, getCurrentInstance, onMounted, watch, onBeforeMount } from 'vue'
//子组件的props类型是复杂的类型的时候，可以用propType进行强制类型转换（eg 复杂函数，对象数组，对象的类型检查）

import type { PropType } from 'vue'
import { startApp, bus } from 'wujie'
import { Props } from './type'
// 声明组件
const wujie = defineComponent({
    props: {
        width: { type: String, default: "" },
        height: { type: String, default: "" },
        name: { type: String, default: "", required: true },
        loading: { type: HTMLElement, default: undefined },
        url: { type: String, default: "", required: true },
        sync: { type: Boolean, default: undefined },
        prefix: { type: Object, default: undefined },
        alive: { type: Boolean, default: undefined },
        props: { type: Object, default: undefined },
        attrs: { type: Object, default: undefined },
        replace: { type: Function as PropType<Props['replace']>, default: undefined },
        fetch: { type: Function as PropType<Props['fetch']>, default: undefined },
        fiber: { type: Boolean, default: undefined },
        degrade: { type: Boolean, default: undefined },
        plugins: { type: Array as PropType<Props['plugins']>, default: null },
        beforeLoad: { type: Function as PropType<Props['beforeLoad']>, default: null },
        beforeMount: { type: Function as PropType<Props['beforeMount']>, default: null },
        afterMount: { type: Function as PropType<Props['afterMount']>, default: null },
        beforeUnmount: { type: Function as PropType<Props['beforeUnmount']>, default: null },
        afterUnmount: { type: Function as PropType<Props['afterUnmount']>, default: null },
        activated: { type: Function as PropType<Props['activated']>, default: null },
        deactivated: { type: Function as PropType<Props['deactivated']>, default: null },
    },


    setup(props, { emit }) {
        const init = () => {
            // 获取当前组件实例
            const instance = getCurrentInstance()
            // 微前端初始化方法
            startApp({
                name: props.name,
                url: props.url,
                el: instance?.refs.wujie as HTMLElement,
                loading: props.loading,
                alive: props.alive,
                fetch: props.fetch,
                props: props.props,
                attrs: props.attrs,
                replace: props.replace,
                sync: props.sync,
                prefix: props.prefix,
                fiber: props.fiber,
                degrade: props.degrade,
                plugins: props.plugins,
                beforeLoad: props.beforeLoad,
                beforeMount: props.beforeMount,
                afterMount: props.afterMount,
                beforeUnmount: props.beforeUnmount,
                afterUnmount: props.afterUnmount,
                activated: props.activated,
                deactivated: props.deactivated,
            })
        }
        // 监听事件触发传递参数
        const handleEmit = (event: string, ...args: any) => {
            emit(event, ...args)
        }
        // 要获取el 所以采用onMounted
        onMounted(() => {
            // 任何$emit都会导致监听函数触发，第一个参数为事件名，后续的参数为$emit的参数
            bus.$onAll(handleEmit)
            init()
        })
        // name 跟url可能是动态变化的，所以要watch后重新初始化
        watch([props.name, props.url], () => {
            init()
        })
        // 销毁时要取消监听
        onBeforeMount(() => {
            bus.$offAll(handleEmit)
        })
        // 返回渲染函数
        return () => h('div', {
            style: {
                width: props.width,
                height: props.height,
            },
            // 当作el传递给startApp
            ref: 'wujie', //方便以后读取
        })
    }


})
// 提供app.use使用的方法 会自动调用install
wujie.install = function (app: any) {
    app.component('WujieVue', wujie)
}
export default wujie

4.配置打包规则

  1. 引入所需的模块：

    • Configuration：Webpack 的配置类型。
    • path：Node.js 的内置模块，用于处理文件路径。

  2. 创建一个配置对象 config，用于配置 Webpack。

  3. 设置入口文件：

    • entry 属性指定了入口文件的路径，这里是 ./src/index.ts。

  4. 设置出口文件：

    • output 属性指定了打包后的文件的输出配置。
    • filename 属性指定了输出文件的名称，这里是 wujie.js。
    • path 属性指定了输出文件目的录，这里使用了 path.resolve 方法来获取绝对路径，__dirname 表示当前文件所在的目录，./lib 表示输出到当前目录下的 lib 文件夹。

  5. 配置打包忽略的文件：

    • externals 属性指定了需要忽略打包的模块。
    • 这里忽略了 vue 和 wujie 模块，意味着在打包时不会将这两个模块打包进最终的输出文件中，而是通过外部引入的方式使用它们。

  6. 设置打包模式：

    • mode 属性指定了打包的模式，这里是 "none"，表示不使用任何内置优化。

  7. 配置模块规则：

    • module 属性用于配置模块的加载规则。
    • rules 属性是一个数组，包含了各种规则对象。
    • 这里只有一个规则对象，用于解析 TypeScript 文件。
    • test 属性指定了需要匹配的文件类型，这里是以 .ts 结尾的文件。
    • loader 属性指定了用于处理匹配到的文件的加载器，这里是 ts-loader，用于将 TypeScript 转换为 JavaScript。

  8. 导出配置对象 config，使其可以被 Webpack 使用。

const { Configuration } = require("webpack");
const path = require("path");
/**
 * @type {Configuration} //配置智能提示
 */
const config = {
  entry: "./src/index.ts", //入口文件
  //出口
  output: {
    //   文件名
    filename: "wujie.js",
    //   出口文件目录
    path: path.resolve(__dirname, "./lib"),
  },
  //配置打包忽略的文件
  externals: {
    vue: "vue",
    wujie: "wujie",
  },
  // 模式源码的方式
  mode: "none",
  module: {
    // 打包规则
    rules: [
      {
        test: /\.ts$/, //解析ts
        loader: "ts-loader",
      },
    ],
  },
};

module.exports = config;

5.执行打包命令 

pnpm run lib 

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lib": "webpack",
  },

 swc技术

SWC

SWC（Super-fast WebAssembly Compiler）是一个基于Rust语言开发的高性能JavaScript和TypeScript编译器。它旨在提供快速且可靠的代码转换和优化，以改善JavaScript和TypeScript应用程序的性能。

SWC的主要特点和优势包括：

  1. 高性能：SWC通过使用Rust语言和优化的算法，实现了比传统的JavaScript编译器更快的编译速度。它能够处理大型代码库，并在短时间内生成高效的输出代码。

  2. 完整的语法支持：SWC支持最新的JavaScript和TypeScript语法，包括ES2015+、JSX、Decorators等。它可以将这些新语法转换为向后兼容的代码，以便在不同的JavaScript环境中运行。

  3. 模块化支持：SWC支持处理模块化的代码，包括CommonJS、ES modules和AMD等。它可以处理模块之间的依赖关系，并生成适合目标环境的模块化代码。

  4. 优化和压缩：SWC可以进行代码优化和压缩，以减小输出文件的大小并提高运行时性能。它可以消除未使用的代码、进行常量折叠和内联等优化操作。

  5. 插件系统：SWC提供了灵活的插件系统，允许开发人员根据自己的需求扩展和定制编译过程。开发人员可以编写自定义的插件来处理特定的转换或优化操作。

总的来说，SWC是一个强大且高性能的JavaScript和TypeScript编译器，适用于需要快速编译和优化代码的项目。它可以帮助开发人员提高应用程序的性能，并提供丰富的语法支持和灵活的插件系统。

Babel

Babel是一个广泛使用的JavaScript编译器工具，用于将新版本的JavaScript代码转换为向后兼容的旧版本，以便在不支持新语法和特性的环境中运行。

JavaScript是一门不断发展的语言，每年都会推出新的语法和特性，但是不同的浏览器和JavaScript运行时环境对这些新特性的支持程度各不相同。这就导致开发人员在编写代码时需要考虑到目标环境的兼容性问题。

Babel的作用就是解决这个问题。它可以将使用了最新语法和特性的JavaScript代码转换为向后兼容的代码，以便在旧版本的浏览器环和境中运行。它可以将ES6、ES7、ES8等新版本的JavaScript代码转换为ES5或更早版本的代码，同时还可以处理一些其他的转换，如JSX转换、TypeScript转换等。

Babel的工作原理是通过解析源代码，构建抽象语法树（AST），然后根据配置文件中的规则进行转换。开发人员可以根据自己的需求配置Babel，选择需要的转换插件和预设，以及指定目标环境的兼容性要求。

总的来说，Babel是一个非常强大的工具，可以帮助开发人员在不同的JavaScript环境中编写兼容性更好的代码，提高开发效率和代码质量

 Babel VS SWC

Babel和SWC都是用于转换JavaScript代码的工具，但它们有一些区别和特点。

  1. 性能：SWC在性能方面通常比Babel更快。SWC是用Rust编写的，它使用了更高效的算法和数据结构，因此在转换大型代码库时可能会比Babel更快。

  2. 兼容性：Babel是非常成熟和广泛使用的工具，它支持广泛的JavaScript语法和特性转换，并且有大量的插件和预设可供选择。SWC相对较新，尽管它也支持许多常见的语法和特性转换，但可能没有像Babel那样广泛的生态系统。

  3. 生态系统：Babel拥有庞大的生态系统，有许多插件和预设可供选择，可以满足各种不同的需求。SWC的生态系统相对较小，但随着其不断发展，预计会有更多的插件和工具出现。

  4. 配置和使用：Babel的配置相对较复杂，需要使用.babelrc或babel.config.js等文件来指定转换规则和插件。SWC的配置相对简单，可以通过命令行参数或配置文件来指定转换规则。

综上所述，Babel是一个成熟且广泛使用的工具，适用于大多数JavaScript项目，具有丰富的插件和预设。SWC则是一个性能更高的新兴工具，适用于对性能要求较高的项目，但其生态系统

更改使用 swc 解析 

 pnpm add -D swc-loader  @swc/core  @swc/cli

  1. library：这个配置项用于指定库的名称。它可以是一个字符串，也可以是一个对象。如果是一个字符串，那么这个字符串将作为全局变量暴露给浏览器环境，可以通过这个全局变量来访问库的功能。如果是一个对象，那么可以通过对象的属性来访问库的功能。

  2. libraryTarget：这个配置项用于指定库的打包方式。它可以是以下几种值之一：

    • "var"：将库作为一个变量声明，可以通过变量来访问库的功能。
    • "this"：将库作为 this 对象的一个属性，可以通过 this 对象来访问库的功能。
    • "window"：将库作为 window 对象的一个属性，可以通过 window 对象来访问库的功能。
    • "global"：将库作为 global 对象的一个属性，可以通过 global 对象来访问库的功能。
    • "commonjs"：将库作为一个 CommonJS 模块导出，可以通过 require 函数来引入库的功能。
    • "commonjs2"：将库作为一个 CommonJS2 模块导出，可以通过 require 函数来引入库的功能。
    • "amd"：将库作为一个 AMD 模块导出，可以通过 AMD 的模块加载器来引入库的功能。
    • "umd"：将库作为一个 UMD 模块导出，可以在各种环境下使用不同的模块器加载来引入库的功能。

  3. umdNamedDefine：这个配置项用于指定是否为 UMD 模块导出的库提供一个命名的模块定义。如果设置为 true，那么在 AMD 或者 CommonJS 环境下引入库时，会使用一个命名的模块定义；如果设置为 false，那么会使用匿名的模块定义。

修改webpack.config.js 

不支持 export import 使用 swc 完成

const { Configuration } = require("webpack");
const path = require("path");
/**
 * @type {Configuration} //配置智能提示
 */
const config = {
  entry: "./src/index.ts", //入口文件
  //出口
  output: {
    //   文件名
    filename: "wujie.js",
    //   出口文件目录
    path: path.resolve(__dirname, "./lib"),
  },
  //配置打包忽略的文件
  externals: {
    vue: "vue",
    wujie: "wujie",
    library: "Wujie",
    libraryTarget: "umd",
    umdNamedDefine: true,
  },
  // 模式源码的方式
  mode: "none",
  module: {
    // 打包规则
    rules: [
      {
        test: /\.ts$/, //解析ts
        loader: "swc-loader",
      },
    ],
  },
};

module.exports = config;

 使用swc 完成 esm 模式  （export--import）

配置 esm 命令

{
  "name": "wujie-vue3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lib": "webpack",
    "esm": " swc src/index.ts -d esm"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "wujie": "^1.0.21"
  },
  "devDependencies": {
    "@swc/cli": "^0.1.63",
    "@swc/core": "^1.3.100",
    "swc-loader": "^0.2.3",
    "ts-loader": "^9.5.1",
    "typescript": "^5.3.2",
    "vue": "^3.3.10",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4"
  }
}

生成 .swcrc文件

{
 "$schema": "https://json.schemastore.org/swcrc",
 "jsc": {
 "parser": {
 "syntax": "typescript",

 },

 "target": "es5",
 "loose": false,
 "externalHelpers": false,
 // Requires v1.2.50 or upper and requires target to be es2016 or upper.
 "keepClassNames": false
 },
 "minify": false
}

执行命令 

pnpm run esm

发布到npm

更改package.json

version：发布的版本

main：配置 main 入口文件地址

module ：配置import 入口地址

files：发布的文件

{
  "name": "wujie-vue3-setups",
  "version": "0.0.1",
  "description": "",
  "main": "lib/wujie.js",
  "module": "esm/wujie.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lib": "webpack",
    "esm": " swc src/index.ts -d esm"
  },
  "files": [
    "lib",
    "esm",
    "index.d.ts"
  ],
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "wujie": "^1.0.21"
  },
  "devDependencies": {
    "@swc/cli": "^0.1.63",
    "@swc/core": "^1.3.100",
    "swc-loader": "^0.2.3",
    "ts-loader": "^9.5.1",
    "typescript": "^5.3.2",
    "vue": "^3.3.10",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4"
  }
}

创建npm账户


如果你还没有npm账户，你需要先创建一个。前往npm官方网站注册一个账户。

注意：记住你填写的用户名、邮箱、密码，等下你在本地是需要用这些信息登录的。

登录npm


在本地登录你刚刚注册的账号

如果是npm，最后还会给你的邮箱发个验证码，填上之后再回车，才算真正登录成功。

执行 npm login，输入用户名、密码以及你注册时的邮箱。

使用以下命令在终端中登录到你的npm账户：

npm login


 这将提示你输入你的npm用户名、密码和邮箱地址。

切换npm源


因为我们要发布到官方源上面，所以要确保源地址为官方地址 http://registry.npmjs.org 或 https://registry.npmjs.com，

可以通过 npm config get registry 命令查看当前 registry 源。

推荐使用nrm管理本地npm源。

全局安装 nrm：  npm install -g nrm

查看npm源：nrm ls
会把所有的源都列出来，其中带*的是当前使用的源

添加npm源：nrm add xxx http://xxxnpm.cn/
xxx 是你给这个源起的名字，后面跟上源的URL 

 

 删除源：nrm del xxx
xxx 是你给这个源起的名字

发布到npm


最后，运行以下命令来发布你的Vue 3组件到npm：

npm publish

前端 贾公子
关注
专栏目录
vue3 vue-router
秋秋小事
04-17 361
vue-router
VUE3+TS+微前端实践
kuari233的博客
06-20 748
基于架构的调整，前端开始转为微前端。经过调研，决定使用qiankun微服务框架来使用，本文将介绍VUE3+TS+qiankun的实践经过。微服务架构的优势之一在于可以结合不同技术栈的节点，基于技术栈的考虑，此处用的都是vue3。qiankun框架确实挺不错的，配置也并不是复杂，但是唯一想吐槽的一点是对于ts的支持感觉不太好/狗头，或许是我写得不够好吧，后面会持续优化使用。
微前端（wujie）使用手册
StoneHui
07-07 1804
wujie 是一个基于 WebComponent 容器 + iframe 沙箱的微前端方案。能够解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持等问题。
将微前端做到极致-无界方案
最新发布
2401_83384536的博客
07-31 1251
无界微前端采用 webcomponent + iframe 的来加载子应用，具有成本低、速度快、原生隔离、功能强大等一系列优点，在满足用户核心诉求的同时让使用微前端的体验就像使用普通组件一样简单，极大的降低了使用门槛。
微前端记录
qq_39933787的博客
04-21 140
参考【
无界(wujie)微前端实现及三种通信方式介绍
热门推荐
acheding的博客
09-29 1万+
本文主要介绍了无界(wujie)微前端和qiankun的对比、wujie的实现及三种通信方式（props、window、eventBus）。
无界(wujie)微前端集成react和vue3实战
m0_63861061的博客
06-30 1158
管理后台项目，前端使用react+antd开发，新框架选型smartadmin vue3，技术方案为使用前端微服务集成两个项目，主应用为vue3，子应用为react；前端微服务框架目前主流的有qiankun，wujie，MicroApp，推荐排名（引用大佬的图片）如下：选用无界的原因：1.对子应用侵入少；2.接入成本较低；3.官方文档和示例很棒；1.判断是否是子应用运行环境并隐藏菜单栏和导航栏，具体效果通过isSubapp控制；
wujie 无界 微前端
u010707194的博客
04-17 2743
子应既没有设置为保活模式，也没有进行生命周期的改造则进入了重建模式，每次页面切换不仅会销毁承载子应用。预执行指的是在应用空闲的时候将子应用提前渲染出来，可以进一步提升子应用打开时间，只需要在。当子应用设置为保活模式，切换子应用后仍然可以保持子应用的状态和路由不会丢失。在保活模式下，子应用只会进行一次渲染，页面发生切换时承载子应用。主应用生命周期：（主应用生命周期跟模式没有关系）销毁子应用当前实例，子应用页面如果切换回来。：子应用渲染后触发（生命周期改造专用）：子应用卸载后触发（生命周期改造专用）
Vue2+微前端qiankun从搭建到部署的实践实现主子应用切换并集成vue3+vite3子应用（新增主应用在线地址可以进入vue2/vue3子应用）
wocwin的博客
02-14 6323
vue+微前端qiankun从搭建到部署的实践（主子应用切换；含vue2+qiankun+vue3+vite3+ts+element-ui+vite-plugin-qiankun技术栈）vue3+vite3+vue+微前端qiankun主子应用切换实践；集成vue3+vite3子应用；（新增Vue2/Vue3后台管理系统模板子应用）新增主应用在线地址可以进入vue2/vue3子应用
微前端——无界wujie
lanmy_dl的博客
12-24 3726
1.全局安装2.使用pnpm -v可以查看版本号3.pnpm比npm的优势，在pnpm中文网的动机这样写pnpm官网简单来说就是，但有100个vue项目，每个项目都会去安装相应的依赖包，这样导致磁盘的缩小和安装速度慢（每次都会重新下载依赖包），很麻烦。但是pnpm使用软链接硬链接和仓库解决。
qiankun-vue3-微前端入门
m0_44963501的博客
11-11 1116
微前端 vue3 qiankun
极致的微前端框架，成本低、速度快、原生隔离、功能强
m0_73466160的博客
08-30 1195
◆一、开源项目简介 无界微前端是一款基于 Web Components + iframe 微前端框架，具备成本低、速度快、原生隔离、功能强等一系列优点。 ◆二、开源协议 使用MIT开源协议 ◆三、界面展示 ◆四、功能概述 背景 微前端已经是一个非常成熟的领域了，但开发者不管采用哪个现有方案，在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题、或无法提供支持。 Web Compon...
基于Vue实现微前端的示例代码
11-21
前端微服务化一直是前端社区的一个热门话题，早在2018年就有不少开发者提出过各种解决方案。或许是未得精髓，个人认为基于Web Components的实现脱离整体打包逻辑的，难以工程化。直到遇到了vue-cli 3，子模块打包的问题得以迎刃而解。2019年秋，团队内部初步实现前端分布式开发，解决了集中式开发部署的“老大难”问题。个人认为，随着WebAssembly等技术的兴起，“前端后移”越来越明显，前端微服务会成为大前端的一个趋势。下面简单分享下本人对前端微服务的一些拙见。 前言    目前的前端技术，大部分是基于JavaScript栈极其衍生的技术栈体系。从当年被人戏称为“玩具语言”发展到今
vue3 wujie
07-27
引用\[2\]:在Vue3中使用无界(Wujie)的步骤如下： 1. 首先，在主项目的main.js中引入WujieVue，并使用Vue.use(WujieVue)来注册插件。 2. 然后，在初始化阶段，使用import WujieVue from "wujie-vue3"来引入WujieVue，...
使用各种姿势舒服的部署微前端项目（上：打包与上传）
qq_15390381的博客
02-24 1456
微前端作为解决巨石应用模块化和降低技术框架变动风险的神器，我觉得是当下前端发展的一大方向，可以在未来5-10年内保持生命力。 作者从2019年12月第一次使用qiankun框架落地微服务以来已经过去了一年多的时间，形成了、脚手架、工程结构设计、日常开发维护、性能优化、部署等一整套流程。 之前有两篇文章讲了qiankun的入门文章： qiankun微前端实战看这篇就够了 - Vue项目篇:这篇文章编写的较早，大致在19年12月份当时qiankun还在1.x版本，现在关于微应用注册及应用间通信的部分已经和现版本
基于 iframe 的全新微前端方案
腾讯技术工程
12-13 3689
作者：damyxu，腾讯 PCG 前端开发工程师iframe是一个天然的微前端方案，但受限于跨域的严格限制而无法很好的应用，本文介绍一种基于 iframe 的全新微前端方案，继承ifram...
《vue3+ts+element-plus 后台管理系统系列》之微前端版本
2401_84150137的博客
04-08 799
前端校招精编面试解析大全点击这里获取完整版pdf查看前端校招精编面试解析大全点击这里获取完整版pdf查看。
微前端架构-qiankun在vue3的应用
wondermaomao的博客
01-30 4981
qiankun是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。其他几款（[single-spa]、[micro-app]、[百度emp]]）使用 iframe 整合系统时，假设我们有系统 A, 当我们想把系统 B 引入 A 系统时，只需要 B 系统提供一个 url 给 A 系统引用即可，这里我们把 A 系统叫做父应用，把 B 系统叫做子应用。同样的，微前端也延续了这个概念，微前端在使用起来基本和使用 iframe 一样平滑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值