vue2与vue3全局组件注册

h7ml2021年5月27日
小于 1 分钟

dgiot-dashboard 最佳实践open in new window

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 注册全局组件的方式就不能使用了。