组件：组件、方法和指令导出

目录

一、导出

二、使用

1、全局引入

2、局部引入

---

一、导出

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
    },
    // ...
</script>