vite+vue3组件自动注册

1.手写方法

注册方法

import { camelCase, upperFirst } from "lodash"

export default {
  install(app) {
    const componentFiles = import.meta.globEager(
      './components/*.vue'
    );

    Object.entries(componentFiles).forEach(([path, m]) => {
      // 截取名称：'../components/customButton/index.vue'  =>  'CustomButton'
      const componentName = upperFirst(
        camelCase(path.split('/').pop().replace(/.\w+$/, ''))
      );
      // 这里给个默认前缀
      app.component(
        `Base${componentName}`, m.default
      );
    })
  },
};

在main.js中使用use注册

import customComponent from './custom.js'
app.use(customComponent)

组件中使用

<base-custom-button></base-custom-button>

2.通过插件

github.com/antfu/unplu…

安装

npm i unplugin-vue-components -D

配置

// vite.config.ts

import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  plugins: [
    Components({
        /* options */
        // To get TypeScript support for auto-imported components
        dts: path.resolve('./typings/plugins', 'components.d.ts'),
        // 你也可以自动注册其他的第三方组件
        resolvers: [
          // 自动注册图标组件
          IconsResolver({
            enabledCollections: ['ep'],
          }),
          // 自动导入 Element Plus 组件
          ElementPlusResolver({ importStyle: "sass" }),
        ],
    }),
  ],
})

在组件中使用

实验证明还是通过'-'连接的方式，可以成功。

<base-custom-button></base-custom-button>