工程化:vite3+vue3如何按需全局引入antdvue组件方法与坑点(一)

风清云淡_A

已于 2024-06-07 16:35:12 修改

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端框架深度研究-vben 文章标签：前端 vue.js javascript

于 2022-12-11 06:32:42 首次发布

本文链接：https://blog.csdn.net/qq_27702739/article/details/128271498

前端框架深度研究-vben 专栏收录该内容

19 篇文章 ¥49.90 ¥99.00

订阅专栏

超级会员免费看

本文探讨前端系统中如何在Vite3和Vue3环境下按需引入AntdVue组件以优化项目体积。通过组件封装、命名规则和配置vite-plugin-vue-setup-extend，实现按需加载。但需注意vite-plugin-vue-setup-extend 0.4版本的一个坑：空组件不会被编译，解决方案是在组件内添加非空代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端系统开发，组件库必不可少，我们一次性引入所有的组件库很简单暴力，但是会增加项目的体积，所以我们探讨按需引入的方式，进行项目的优化

演示效果

在这里插入图片描述

基础代码

main.js

import {
   
    createApp } from 'vue'
import 'ant-design-vue/dist/antd.css'
import './style.css'
// import Antd from 'ant-design-vue'

了解本专栏

超级会员免费看