@lx-frontend/modularize
v1.0.5
Published
为多模块大型项目提供模块化注册方案。
Downloads
12
Maintainers
Keywords
Readme
modularize
为多模块大型项目提供模块化注册方案。
Usage
|--- package.json
|--- README.md
|--- src
| |--- main.js
| |--- App.vue
| |--- router
| | |--- index.js
| |--- vuex
| | |--- index.js
| |--- ajax
| | |--- index.js
| |--- modules
| | |--- index.vue
| | |--- module1
| | | |--- page 1...n
| | | |--- configs
| | | | |--- ajax.js
| | | | |--- router.js
| | | | |--- store.js
| | | | |--- service.js
| | |--- module2
| | | |--- page 1...n
| | | |--- configs
| | | | |--- ajax.js
| | | | |--- router.js
| | | | |--- store.js
| | | | |--- service.js
如上,是一个项目的目录结构,其中,modules是放置模块的文件夹,module1,module2是两个模块。
模块下,page是模块的页面文件,configs下是模块的相关配置。其中service仅仅是引入了ajax、router和store的配置,然后直接导出。(每个模块都可以当做一个单独的服务,故取名service)
假设,module1将作为同步模块注册,即app初始化完成之后立即注册。module2作为异步模块注册,即,只有当路由导航到该模块时,再加载模块注册。请看以下使用方式:
// main.js
import router from './router'
import store from './vuex'
import ajax from './ajax'
import Modularize from 'modularize'
// 引入同步模块
import module1 from './modules/module1/configs/service'
// 同步模块集合
const basicModulesMap = { module1 }
// 异步模块集合
const asyncModules = {
module2: () => import('./modules/module2/configs/service'),
}
// 设置路由守卫,模块注册在路由的beforeEach全局守卫中实现
Modularize.setRouterBeforeEachGuard(router);
// 注册插件,为vue实例提供注册模块使用的函数registerModule
Vue.use(Modularize);
// 实例化
const modules = new Modularize({
basicModules: basicModulesMap,
asyncModules: asyncModulesMap,
});
new Vue({
router,
store,
ajax,
modules, // 作为应有实例化的参数传入
render: h => h(App),
}).$mount('#app');
注意事项:
模块名称的设置很重要,名称设置不当,可能会导致模块注册失败。
该安装包是通过获取导航路径的第一个字符串,并以该字符串为模块名称,查找模块集合中对应的模块,然后注册。
比如:假设导航目标为/profile/index
,则profile
将作为模块名称在模块集合中查找。
所以,在如下的配置中,module1和module2的名称非常重要,一定要和导航路由的第一个字符串对应。建议使用模块的文件夹名称,并保持一致。
// 引入同步模块
const basicModulesMap = { module1 }
// 异步模块集合
const asyncModules = {
module2: () => import('./modules/module2/configs/service'),
}
配合loader使用
在以上的使用方式中,模块目录的结构并不是强制要求的,只要最终能够正确设置Modularize包的参数即可正常工作。
为了在模块的目录结构上进一步约束,同时也进一步方便Modularize的使用,安装包配套提供了一个loader。
具体使用方式请参阅loader的文档。