Vite 按需引入 Ant Design Vue 3.0

最新推荐文章于 2024-06-09 16:20:20 发布

KF_19924636653

最新推荐文章于 2024-06-09 16:20:20 发布

阅读量398

点赞数 1

分类专栏：前端 html 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_54854317/article/details/123367758

版权

本文记录了在Vite构建Vue3项目时，如何按需引入Ant Design Vue 3.0的过程。在尝试过程中，遇到vite-plugin-components插件已更名的问题，解决方案是安装并配置unplugin-vue-components。完成配置后，Vite会自动按需打包使用过的组件。

摘要由CSDN通过智能技术生成

描述：

最近尝试用 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'

关注

专栏目录