实现组件自动加载

组件自动加载介绍

实现组件自动加载后可以在 vue 项目中直接使用组件而不需要 import 组件及注册组件，在开发中这样做是非常方便和高效的。

实现组件自动加载

在 vite 环境下，可以利用 unplugin-vue-components 插件实现组件自动加载。步骤如下 :

1 安装 unplugin-vue-components 插件

项目内打开终端，执行 npm 命令 :

npm i unplugin-vue-components -D

2 配置自动加载规则

打开 vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		vue(),
		Components()
	]
})

完成上面的步骤后，在 src/components/ 目录下的组件均可以实现自动加载，在开发中直接使用组件即可，不再需要 import 引入组件及注册组件。

自定义解析器

您还可以自定义组件目录及加载规则，如 :

自定义组件目录 : /src/components/MyComponents
组件组件文件规则 : /src/components/MyComponents/My首字母大写+组件名称

实现自定义加载配置如下 :

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		vue(),
		Components({
		  resolvers: [
		    (name) => {
		    if (name.startsWith('My'))
				return { importName: name.slice(2), path: 'MyComponents' }
		    }
		  ]
		})
	]
})