本文共 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});

二、使用

1、全局引入

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')

2、局部引入

单 .vue 文件

import { MyLayerTree, MyToolBar } from 'my-webcomponents'export default {    components: {        MyLayerTree,        MyToolBar    },    // ...

转载地址：http://xanii.baihongyu.com/