自定义组件自动引入的方法

不需要在页面手动注册

1. 在main.js中写方法

// 获取组件
const files = import.meta.globEager('@/components/*/*.vue')
const list = Object.keys(files)
// 组件自动化引入，无需再页面手动引入
list.forEach(item => {
    // 获取最后组件vue的文件名称
    const arr = item.replace(/\.vue$/, '').split('/')
    const component = files[item].default
    // 注册组件
    app.component(arr[arr.length - 1], component)
})

打包后的文件大小：

按需引入，不需要在页面手动注册

2. 在vite.config.js使用unplugin-vue-components, 安装：npm i -D unplugin-vue-components

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

export default defineConfig({
    plugins: [
    vue(),
    Components({
      dts: false,
      dirs: ['src/components'], // 按需加载的文件
      resolvers: [
        AntDesignVueResolver()
      ]
    })
  ],
})

打包后的文件大小：