vue 动态、批量引入组件

在Vue中，可以使用require.context()方法来实现动态、批量引入组件的功能。以下是一个实现的例子：

// 在src/components/目录下，所有文件名不包含-index的.vue文件将被引入
const requireComponent = require.context('.', false, /\.vue$/);
 
// 检索src/components/目录下的所有.vue文件
const install = (Vue) => {
  requireComponent.keys().forEach((fileName) => {
    // 获取组件配置
    const componentConfig = requireComponent(fileName);
 
    // 获取组件的 PascalCase 命名
    const componentName = upperFirst(
      camelCase(
        fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
      )
    );
 
    // 全局注册组件
    Vue.component(componentName, componentConfig.default || componentConfig);
  });
};
 
export default {
  install
};

然后，在主文件（如main.js）中使用这个插件：

import Vue from 'vue';
import AutoComponentsPlugin from './plugins/auto-components-plugin';
 
Vue.use(AutoComponentsPlugin);
 
// 之后就可以在其他组件中直接使用上面注册的组件了

这样，你就可以动态地、批量地引入src/components目录下的所有Vue组件，而不必手动一个个引入。这在大型项目中会非常有用。