个人建站前端篇（五）插件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'], // 配置需要默认导入的自定义组件文件夹，该文件夹下的所有组件都会自动 import      resolvers: [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'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      }    }  }})

点击全文阅读