Vue微前端方案vue-module-loader支持vue3了

青衿
1,271 阅读3分钟

扯淡

也许很多人会觉得这是什么玩意儿，vue2时期压根都没听说过你！

确实如此。首次尝试开源，无所适从，不知道应该怎么做，或者怎么做是对的。只是搞了个东西，还真能用，就小范围推荐了一下，得到了一些好的反馈，收获了一些自然star，仅此而已。

背景

2017年末，公司开始了一个多方协作的项目，项目具有强烈的独立管理和责任划分的需求。社区寻找无果，我设计了一种支持分库开发、构建、部署，同时支持独立，合并运行的架构模式。当时的架构集成了包括UI框架，第三方库，公共方法在内的很多预设内容，是个大而全的设计。其实当时还未在社区听说过“微前端”这个表述，所以一直没有准确的表述。经过一年多的内部项目检验，此架构模式得到了可靠性验证结果，我把这些整理了一下，起名叫Admincraft。

历史

随着项目发展，admincraft凸显出了很多问题，约定死的布局层级，内置的第三方库，不够通用的内置方法导致架构非常不灵活，仅仅只能用于特定的中后台项目。思考再三，摘去了几乎所有应用层面的内容，只保留了模块加载核心能力，我发布了第一个支持vue2版本的微前端模块加载器：vue-module-loader v1.x 阅读文档。

因为只是加载器，所以它并非框架，定位是一个vue插件，用来加载符合约定设计模式的lib模块。

已经记不清当时是怎么推广的了，官网只留了一个qq群二维码，后来陆陆续续有一些朋友加入。

image.png

github仓库也慢慢有了一些star。

image.png

群里也有人顺利的用于生产项目，这一切的发展还是很令人兴奋的。

未来

Vue3稳定版已发布，群里也有一些朋友的希望能支持vue3，vue-module-loader到了该更新的时候了。

vue-module-loader v3.x阅读文档基于vite开发，vite的能力在此就不过多赘述了，你懂得。

和1.x的理念保持一致，vue-module-loader 只具有加载器能力，以vue3插件形式存在。同时，为了跟vue3开始使用Hook的风格保持一致，vue-module-loader 的API也以Hook形式提供，不再绑定vue组件实例。

使用

自动

  1. 安装命令行工具

    npm install -g vue-module-creator
# 或使用yarn
yarn global add vue-module-creator

  2. 创建工程

    vml create

  3. 跟随引导操作

    image.png

手动

  1. 安装

    yarn add vue-module-loader@next

    注意：务必使用 next 标签安装支持vue3的版本

  2. 使用

    // main.js
// 需要整体导入Vue3对象
import * as vue from "vue";
import vml from "vue-module-loader";
const app = vue.createApp({});
// 使用插件
app.use(vml, vue);

    安装后在任意 js 或 vue 文件中使用

    import { useModule } from "vue-module-loader";
useModule(
  // 测试模块连接
  "http://static.mengqinghe.com/vml/module/vue-module-module.iife.js"
);

感兴趣的朋友可以进一步阅读详细文档

欢迎各位批评指正！

avatar
文章
阅读
粉丝