@vue-async/module-loader

Module Loader Core.

Usage no npm install needed!

<script type="module">
  import vueAsyncModuleLoader from 'https://cdn.skypack.dev/@vue-async/module-loader';
</script>

README

模块化加载

安装

yarn add @vue-async/module-loader
或者
npm i -S @vue-async/module-loader

使用方法

// ## 主程序 ##

// 引入模块
import ModuleLoader from '@vue-async/module-loader';

/*
 * 注意:ES Module需要添加到`transpile`中编译
 * vue-cli 请添加到 vue.config.js 中的 transpileDependencies 上
 * nuxtjs 请添加到 nuxt.config.js 中的 build.transpile 上
 */

Vue.use(ModuleLoader);

// 方法一
var moduleLoader = new ModuleLoader({
  // 自定义扩展参数,
  fn:()=>{}
});

var app = new Vue({
  moduleLoader,
  render:(h)=> h(App)
})

app.$moduleLoader(ModuleConfig).then(()=>{
  app.$mount('#app')
})

// 方法二 (在 nuxtjs 的 plugin 中使用时)
var plugin = (context) => {
  var moduleLoader = new ModuleLoader({
    // 自定义扩展参数,
    fn:()=>{}
  });

  await moduleLoader.load(ModuleConfig)

  // 添加到 Vue options 中
  context.app.moduleLoader = moduleLoader
}
export default plugin

// ## 子模块 ##

// main.js 入口文件
export default function(Vue, options){}

// Typescript
import { VueConstructor } from 'vue';
import { ModuleContext } from '@vue-async/module-loader-typing';

export default function(Vue:VueConstructor, options: Recode<string, any> ={}){
  // do something
}

ModuleConfig 配置

// 示例:

// 数组配置方式(支持与对象配置方式混合)
[
  // Key/Value
  {
    // 模块名称:远程 umd 文件 url 地址
    moduleName: 'remote url',
    moduleName: {
      entry: 'remote url', // 远程 umd 文件 url 地址
      styles: [], // 自定义样式文件(例如 ExtractTextPlugin extract:true时打成独立 css文件)
      args:{}
    }
  },
  // Object
  {
    moduleName: '',
    entry: '',
    styles:[],
    args:{}
  },
  // Function
  function entry(Vue){}
]

// or 对象配置方式
{
  moduleName: 'remote url',
  moduleName: {
    entry: 'remote url',
    styles: [],
    args:{}
  },
  function entry(Vue){}
}

moduleName
Type: string
umd 文件时打包时 lib 名, 必填项。

entry
Type: string
远程 umd 文件 url 地址, 必填项

styles
Type: string | string[]
如果打包时样式文件被分离,可以能过这里引用,可选项

args
Type: Object
参数将会传递到入口方法中的第二个参数,可选项(子模块需要判断 undefined
此参数与 $moduleLoadManager 区别在于此参数只会传递给单个子模块调用

options

sync
Type: Boolean 子模块是否按同步的方式执行加载,即按List的顺序执行。

onLoading
Type: Function
参数: name: 模块名
模块加载前

onLoaded
Type: Function
参数: name: 模块名
模块加载成功

onError
Type: Function
参数: name: 模块名
模块加载失败


Vue 上下文注入方法

this.$componentLoader(remote url)
远程加载单个组件,返回 Promise<VueComponent>, 可作为 Vue 异步组件直接加载。

this.$eventBus
父子模块通讯

    方法:
    emit(eventName,playload) 触发事件
    on(eventName, (playload)=>{}) 添加事件
    off(eventName, (playload)=>{}) 移除事件
    clean() 移除所有事件
    getEvents() 获取所有事件

this.$moduleLoadManager
实例化 ModuleLoader 时的参数能过合并后的值, 支持 Vue 响应。
注:在 Vue 被实例化之前加载子模块时,入口函数内无法调用到此对象
    默认值:
    layouts
    Type: Object
    通过 addLayouts 添加的模板对象

    addLayouts(name:string, layout: VueComponent)
    将组件模板添加到 layouts 中, 此方法可以在实例化参数中被覆盖重写

    addRoutes(routes:RouteConfig[])
    添加路由, 主程序需要引用vue-router, 此方法可以在实例化参数中被覆盖重写

注:当主组件引用vue-router包后,将会自动注入方法解决404问题,需要在主程序中添加一条配置 name404 page-not-found not-foundpath* 的路由后生效