Vue3 vite unplugin-vue-components 插件的使用

29 min read

Vue3 vite unplugin-vue-components 是一个用于将 Vue 组件自动导入为全局组件的 Vite 插件。它允许你在项目中使用 Vue3 的 Composition API，而不需要在每个文件中手动导入组件。

下面是 unplugin-vue-components 的使用步骤：

  1. 安装插件：
npm install unplugin-vue-components
  1. 在 vite.config.js 文件中添加插件的配置：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      // 添加需要自动导入的组件
      dirs: ['src/components'],
      extensions: ['vue'],
      dts: true,
    }),
  ],
})

在以上的配置中，我们指定了需要自动导入组件的目录为 src/components，并且只导入后缀为 .vue 的文件。

  1. 创建一个 Vue 组件文件（例如 src/components/HelloWorld.vue）：
<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  // ...
}
</script>
  1. 在其他地方使用该组件，无需手动导入：
<template>
  <div>
    <HelloWorld />
  </div>
</template>

<script>
// 无需手动导入 HelloWorld 组件
export default {
  // ...
}
</script>

这样，你就可以在项目中轻松地使用 unplugin-vue-components 插件自动导入 Vue 组件了。