vue3+vite插件配置系列3-unplugin-auto-components

📝作用

解放双手，自动按需导入组件和注册组件

📝使用

🔖1.下载

npm i -D unplugin-auto-components

🔖2.vite.config.ts配置

import Components from "unplugin-vue-components/vite"
export default defineConfig({
  plugins: [
    ...
     Components({
      dirs: ["src/components"], // 要导入组件的目录的相对路径
      deep: true, // 搜索子目录
      dts: "src/components/components.d.ts", // 生成 `components.d.ts` 全局声明
    })
  ]
})

🔖3.现在src/components目录下的所有vue组件会自动注册为组件，直接使用即可

before

<template>
  <helloworld></helloworld> 
</template>

<script lang="ts" setup>
import helloworld from '../../components/helloworld.vue'
</script>

after

<template>
  <helloworld></helloworld> 
</template>

<script lang="ts" setup>
</script>

🔖4.内置Resolver可以按需导入很多组件库，比如element-plus

下载element-plus和sass后，如下配置

import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
export default defineConfig({
  plugins: [
    ...
    Components({
      dirs: ["src/components"], // 要搜索组件的目录的相对路径
      deep: true, // 搜索子目录
      dts: "src/components/components.d.ts", // 生成 `components.d.ts` 全局声明
      resolvers: [
        ElementPlusResolver({
          importStyle: "sass"
        })
      ]
    })
  ]
})

这样就可以在页面中直接使用element-plus组件了，甚至不用在main.ts里进行app.use，并且按需加载组件和样式，非常的强大