个人建站前端篇（五）插件unplugin-vue-components的使用

本文主要是介绍个人建站前端篇（五）插件unplugin-vue-components的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

unplugin-vue-components 是由 Vue官方人员开发的一款自动引入插件，可以省去比如 UI 库的大量 import 语句。

unplugin-vue-components 插件可以在Vue文件中自动引入组件（包括项目自身的组件和各种组件库中的组件）使用此插件后，不需要手动编写 import { Button } from 'ant-design-vue’这样的代码了，插件会自动识别 template中使用的自定义组件并自动注册。

// 1、安装
npm i unplugin-vue-components -D// 2、配置
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
import { defineConfig } from 'vite'export default defineConfig({plugins: [Components({dirs: ['src/components'], // 配置需要默认导入的自定义组件文件夹，该文件夹下的所有组件都会自动 importresolvers: [AntDesignVueResolver({ importStyle: false, resolveIcons: true })]})]
}

当你使用unplugin-vue-components来引入ui库的时候，message, notification 等引入样式不生效。此时就需要安装vite-plugin-style-import即可

// vite.config.js
import { defineConfig } from 'vite'
import styleImport, {AndDesignVueResolve,VantResolve,ElementPlusResolve,NutuiResolve,AntdResolve
} from 'vite-plugin-style-import'export default defineConfig({plugins: [styleImport({resolves: [AndDesignVueResolve(),VantResolve(),ElementPlusResolve(),NutuiResolve(),AntdResolve()],// 自定义规则libs: [{libraryName: 'ant-design-vue',esModule: true,resolveStyle: (name) => {return `ant-design-vue/es/${name}/style/index`}}]})],// 引用使用less的库要配置一下css: {preprocessorOptions: {less: {javascriptEnabled: true}}}
})