本文共 2549 字,大约阅读时间需要 8 分钟。
目录
index.js 文件
/** * 解析模块 * @param modulesList 模块对象列表 * @param type 模块类型,component 组件,function 方法,directive 指令 */const exportModule = (modulesList, type) => { // 获取模块对象列表 let modules = modulesList.keys().reduce((obj, modulePath) => { // 模块名 let moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1"); // 模块对象 let moduleObj = modulesList(modulePath); // 放入模块 obj[moduleName] = moduleObj.default; // 组件的单个导出 if(type === 'component') { Object.assign(exports, { [moduleName]: moduleObj.default }); } return obj; }, {}); // 要导出的 let exportModules; switch (type) { case 'component': { // 全局引入 exportModules = function (Vue, opts = {}) { for (let i in modules) { Vue.component(i, modules[i]); } }; //支持使用标签方式引入 if (typeof window !== "undefined" && window.Vue) { exportModules(window.Vue); } break; } case 'function': { exportModules = modules; break; } case 'directive': { // 全局引入 exportModules = function (Vue, opts = {}) { for (let i in modules) { Vue.directive(i, modules[i]); } }; break; } } return exportModules;}// --- 组件 ---// 注意:require 不能放在方法里,无法识别const componentList = require.context("./src/components", true, /\.vue$/);const MyComponents = exportModule(componentList, 'component');// --- 方法 ---const functionList = require.context("./src/functions", true, /\.js$/);const MyFunctions = exportModule(functionList, 'function');// --- 指令 ---const directiveList = require.context("./src/directive", true, /\.js$/);const MyDirectives= exportModule(directiveList, 'directive');// 合并导出Object.assign(exports, {MyComponents}, {MyFunctions}, {MyDirectives});
main.js
import Vue from 'vue'import App from './App.vue'// 全局引入 - 指令(仅全局)import { MyDirectives } from 'my-webcomponents'// 方式一// MyDirectives(Vue);// 方式二Vue.use(MyDirectives);// 全局引入 - 组件(可全局或局部)import { MyComponents } from 'my-webcomponents';Vue.use(MyComponents);// 全局引入 - 方法(仅全局)import { MyFunction } from 'my-webcomponents';export default { name: 'App'}new Vue({ render: h => h(App),}).$mount('#app')
单 .vue 文件
import { MyLayerTree, MyToolBar } from 'my-webcomponents'export default { components: { MyLayerTree, MyToolBar }, // ...
转载地址:http://xanii.baihongyu.com/