vue批量导出注册组件 webpack环境

1. 批量导出组件

// 文件地址 @/base-ui/index.js
// 导入组件
const files = require.context("@/base-ui", true, /\.vue$/);
const modules = importComponents(files);
const install = (Vue) => {
  Object.keys(modules).map((component) => {
    modules[component].name &&
      Vue.component(modules[component].name, modules[component]);
  });
};

// 处理组件
export const importComponents = (files) => {
  const path = require("path");
  const modules = {};
  files.keys().forEach((key) => {
    const name = path.basename(key, ".vue");
    modules[name] = files(key).default || files(key);
  });
  return modules;
};


// 判断是否是直接引入文件
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}

export default { install };

2. 组件注册

// main.js
import baseui from '@/base-ui'

Vue.use(baseui)