为什么使用 unplugin-vue-components

先看一个小例子：
以前，我们在开发中，使用组件需要如下：

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
import HelloWorld from './src/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

现在只要在 src/components 下定义的组件都将会按需引入，即 是不需要引入和声明的，直接使用即可。

<!-- src/pages/index.vue -->
<script setup lang="ts">
	import Hello from '../components/Hello.vue'
</script>

<template>
	<Hello />
</template>

相比之下，是不是精简了很多，下面我们一起来看一下怎么使用吧。

安装

使用命令

pnpm add unplugin-vue-components -D

配置

在 vite.config.ts 中引入注册

// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      extensions: ["vue", "md", "tsx"],//后缀扩展名
      include: [/\.md$/, /\.vue$/, /\.tsx$/],//用于转换目标的过滤器
      dts: resolve(__dirname, "../src/types/components.d.ts"),//指定类型文件
      resolvers: [ElementPlusResolver()],//解析器
    }),
  ],
})

UI组件库组件api引入

目前支持的组件库有:

Ant Design Vue
Arco Design Vue
Element Plus
Element UI
Headless UI
IDux
Inkline
Naive UI
Prime Vue
Vant
VEUI
Varlet UI
View UI
Vuetify
VueUse Components
Quasar
TDesign

安装依赖

pnpm add element-plus

配置

这里以 element-plus为例：

// vite.config.ts
import Components from 'unplugin-vue-components/vite'
import {
  ElementPlusResolver,
} from 'unplugin-vue-components/resolvers'

Components({
  resolvers: [
    ElementPlusResolver(),
  ],
})

在模板中使用。

<!-- src/pages/index.vue -->
<template>
	<el-alert title="success alert" type="success" />
</template>

具体可见:
https://github.com/antfu/unplugin-vue-components