@vue-async/module-loader NPM

模块化加载

安装

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 添加的模板对象