个人建站前端篇（五）插件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'exportdefaultdefineConfig({plugins:[Components({dirs:['src/components'],// 配置需要默认导入的自定义组件文件夹，该文件夹下的所有组件都会自动 importresolvers:[AntDesignVueResolver({importStyle:false,resolveIcons:true})]})]}

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

// vite.config.jsimport{ defineConfig }from'vite'import styleImport,{
  AndDesignVueResolve,
  VantResolve,
  ElementPlusResolve,
  NutuiResolve,
  AntdResolve
}from'vite-plugin-style-import'exportdefaultdefineConfig({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}}}})