Vite 按需引入 Ant Design Vue 3.0

描述：

最近尝试用 Vite 构建了 Vue3.0 的项目，组件库选用的是 Ant Design Vue 3.0，在按需加载引用上踩了很多坑，在此记录一下

过程：

antd 的官网的使用介绍是在 vite.config.js 文件中引用 ‘’vite-plugin-components‘’

// vite.config.js
import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components';
...

前往 vite-plugin-components 的官网查看，发现网站已变更，现在是: https://github.com/antfu/unplugin-vue-components
下方还有提示：

vite-plugin-components has been renamed to unplugin-vue-components

意思就是 vite-plugin-components 已经更名 unplugin-vue-components
然后就是安装方式：

npm i unplugin-vue-components -D

引用方式：

// vite.config.js
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    ...
    Components({
      resolvers: [AntDesignVueResolver()]
    })
  ]
})

到此就是全部OK啦，可以安心地使用组件了

总结：

使用的过程中发现，Vite 下的按需加载，不需要单独导入所需组件，例如

import { Button } from 'ant-design-vue';
...
app.use(Button).mount('#app');

而是直接在项目中使用所需的组件即可，在最后的打包 Vite 会选择性地打包使用过的组件~