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, 此方法可以在实例化参数中被覆盖重写