unplugin-vue-components的使用(个人)

1、安装

npm i unplugin-vue-components -D

2、配置(vite.config.js),这里我是vue3+vite+js搭建的

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

export default defineConfig({
  plugins: [
    vue(),
    Components({
      dirs: ['src/components'], // 默认就是识别src/components文件，该文件夹下的所有组件都会自动 import
    })
  ]
})

3、使用

文件结构如图

  <h1>主页</h1>
   <about></about>
   <show></show>
   <ok></ok>

使用代码如上，结果如下