vue2与vue3全局组件注册

dgiot-dashboard 最佳实践

vue2

import Vue from 'vue';
const requireComponent = require.context('./components', true, /[A-Z]\w+\.(vue|js)$/);

获取组件配置

import _ from 'lodash';
requireComponent.keys().forEach((fileName) => {
  const componentConfig = requireComponent(fileName);
  const componentName = _.upperFirst(
    _.camelCase(
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  );
});

全局注册组件

Vue.component(componentName, componentConfig.default || componentConfig);

Vite 注册全局组件的方式

import.meta.glob()

import.meta.globEager()

const components = import.meta.glob('./components/*/*.vue');
export default function install(app) {
  for (const [key, value] of Object.entries(components)) {
    const name = key.split('/')[1];
    app.component(name, defineAsyncComponent(value));
  }
}

在 main.js 文件中 import 并 use

import { createApp } from 'vue';
import App from './App.vue';
import components from './components/index.js';
createApp(App).use(components).mount('#app');

因为在 Vite 中不能使用 webpack 的 require.context()方式来读取文,所以之前使用 webpack 注册全局组件的方式就不能使用了。