第2讲：VUE3集成ant-design-vue第3版，配置使用自定义主题。

最新推荐文章于 2025-11-21 16:16:53 发布
原创 最新推荐文章于 2025-11-21 16:16:53 发布 · 1.2w 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

本篇博客介绍了如何在Vue3项目中集成并配置ant-design-vue的第三版，强调了3.x版本相较于2.x在性能和功能上的提升，并提醒用户当前为alpha版，需关注更新。推荐使用Visual Studio Code作为开发工具，并安装Ant Design Vue helper插件。此外，详细说明了升级less-loader、创建vue.config.js、定制项目主题及在main.ts中集成antdv的步骤。

为什么选择V3，引用官方说明。

2.x 版本是为了兼容 Vue 3 开发的兼容版本，他并没有带来很多新的特性，大多数的 API 改变也只是为了更好的兼容 Vue 3。 3.x 版本在性能、易用性、功能上都有了很大的提升，3.x 版本稳定后，我们会归档 2.x 版本，建议您尽快升级 3.x 版本。虽然有很多改动，但基本都做了兼容，你可以按照控制台给出的警告逐步升级。

cd dvtop-designer
npm install ant-design-vue@3.0.0-alpha.10 --save

注意：此刻ant-design-vue V3还是alpha版，注意关注下面版本，及时更新。ant-design-vue - npmAn enterprise-class UI design language and Vue-based implementationhttps://www.npmjs.com/package/ant-design-vue

开发工具推荐选用Visual Studio Code，针对antdv可以安装Ant Design Vue helper。

最低0.47元/天 解锁文章
vue3中ant design使用
猿脑2.0的博客
07-31 1975
Ant Design Vue 支持自定义主题，你可以通过修改 SCSS 变量来定制主题。新建一个 SCSS 文件，例如。在这个文件中覆盖 Ant Design Vue 的 SCSS 变量。scss在入口文件中引入这个自定义样式文件：javascript// main.js 或 main.ts确保你的项目环境支持 SCSS，并且已经正确配置了相关 loader。通过以上步骤，你可以在 Vue 3 项目中使用 Ant Design Vue 组件库。
【前端VUE3】vue3 + ant-design-vue3 (axios vuex router)
悟空—
12-15 3043
检查是否已安装 node -v npm -v ant-design-vue3 文档 （https://next.antdv.com/components/overview/ ） 1.安装vue/cli: npminstall-g@vue/cli@next 2.创建项目（"vue":"^3.2.13"） vue create ant-vue 选择：Default(vue3) 等待》》》 创建成功 cd ant-vue npm run serve 运行 3.安装ant-d...
Vue 3 + Ant Design Vue 打造高度通用的动态可编辑表格
最新发布
weixin_41940856的博客
11-21 317
通过这种配置化的方式，我们将一个特定的业务组件提升为了一个通用的 UI 框架。现在，无论你的业务是管理 “资质”、“技能” 还是 “联系人”，都可以复用同一个组件，只需编写相应的配置即可。这极大地提高了开发效率，减少了重复代码，并使得维护变得更加容易。这个通用组件还可以进一步扩展，例如支持更多的表单组件类型（如checkboxradiotextarea等）、更复杂的联动逻辑或更自定义的单元格渲染。
【Vue3】集成 Ant Design Vue
又言又语
08-21 1090
本文介绍 Vue3 集成 Ant Design Vue 的方法步骤。Ant Design 是蚂蚁集团和 Ant Design 开源社区推出的一套基于 React 的 UI 设计语言和组件库，适用于企业级中后台产品。Ant Design Vue 是基于 Ant Design 和 Vue 技术栈的实现。本文只介绍了全局完整注册 Ant Design Vue 的方法，适用于对打包文件大小不敏感的场景，除此外还可以全局部分注册和局部注册组件，参考官方文档。
Vue3中Ant-design-vue的使用-附完整代码
本人的博客
06-04 4665
​Ant Design Vue 是基于 Vue 3 的企业级 UI 组件库（同时兼容 Vue 2），是蚂蚁金服开源项目 Ant Design 的 Vue 实现版本。它遵循 Ant Design 的设计规范，提供丰富的组件和高质量的设计体系，适用于中后台管理系统和复杂业务场景。
vue3+ant-design-vue使用
weixin_52276328的博客
03-28 3018
vue3和ant-design-vue输入框，跳转使用
ant-design-vue-4.2.1.zip
08-26
基于 Ant Design 和 Vue 的企业级 UI 组件库
第3讲：VUE3+ant-design-vue第3版，配置vue-i18n国际化语言支持。
DVTOP的博客
11-09 2647
此处国际化选择采用i18n，VUE3必须使用vue-i18n@next安装。 antd在 V3 版本开始，默认使用 dayjs 替换了 momentjs 库。所以在国际化时，还要同时完成antd和dayjs的国际化处理。 cd dvtop-designer npm install vue-i18n@next --save npm install dayjs --save 创建语言文件，如zh_cn.ts，类似方法创建zh_tw.ts、en_gb.ts等。 module.exports = {
ant-design-vue-1.7.2.zip
08-26
基于 Ant Design 和 Vue 的企业级 UI 组件库
ant-design-vue-pro：像Pro一样使用Ant Design Vue！
02-05
@ vue / cli〜3 -Vue的蚂蚁设计 图片编辑 -AntV G2 Viser -Vue的Antv / G2 注意：建议使用软件包管理，此项目的演示站点（yarn.lock）加载的版本完全相同。 但您也可以使用npm 项目设置 克隆回购 git clone ...
vue3-ant-design-vue
lxs19930928的博客
12-05 1095
新建vue3项目 npx vue create project 手动选择vue3项目即可 运行 yarn serve 进入antd-design-vue官网,选择v2或者v3即可 下载antd-design-vue yarn add ant-design-vue@next main.js引入 import { createApp } from 'vue' import App from './App.vue' import router from './router' import stor
vue3+ant design vue+ts实战【ant-design-vue组件库引入】
热门推荐
XSL_HR的博客
10-19 1万+
一个好项目的编写不仅需要完美的逻辑，以及相应的技术，同时也需要一个设计规范的高质量UI组件库。本期文章将会详细讲解Ant Design Vue组件库的安装、引入和使用。
Ant-Design-Vue 自定义主题：全面指南
2401_85702623的博客
06-17 2518
在项目的入口文件，如main.js中引入自定义主题文件。// 引入自定义主题通过自定义 Ant Design Vue 的主题，你可以为应用创建一个独特且一致的视觉体验。本文提供了一个全面的指南，帮助你从理解组件库到实现自定义主题的每一步。
Vue 3 搭建前端模板并集成 Ant Design Vue（2025）
白白白鲤鱼的博客
02-26 4848
Vue 3 搭建前端模板并集成 Ant Design Vue（2025）
Vue 3 搭配 Ant Design Vue：构建专业级前端应用(小白必看)
前端开发探索之旅
02-11 2678
丰富的组件库：涵盖了从基础的按钮、输入框到复杂的表格、表单、树形控件等大量组件，满足各种业务场景的需求。一致性设计：遵循 Ant Design 统一的设计语言，组件风格统一，视觉效果美观，能帮助开发者打造出具有专业感的界面。高度可定制：提供了丰富的配置选项和样式定制能力，允许开发者根据项目需求对组件进行个性化定制。国际化支持：支持多种语言，方便开发全球化的应用。借助工具，可以生成自定义主题。然后按照官方文档的指引生成并引入自定义主题。
Ant Design 与 初创vue3项目（含请求的封装、环境变量等）
m0_74420108的博客
08-11 680
4、在src目录下创建utils工具文件夹,在utils文件夹下创建新的auth.js文件，此文件用于全局控制token。3、环境变量配置，在根目录下创建.env.development及.env.production文件。2、引入工具样式，在src目录下创建styles文件夹 添加utils.css。5、请求封装， 在utils工具文件夹内，创建request.js封装请求。7、跨域问题的解决 vite.config.js。在vue.config.js中加入如下代码。配置文件vue.config.js。
vue3.0自定义ant-design-vue主题
qq_31525367的博客
05-27 1885
今天写后台管理系统的时候，发现有很多颜色一样可以去自定义主题，那么问题来了我们vue3+vue-cli4怎么去自定义呢？ 先在css文件夹下创建一个.less文件，存放公共信息 在该文件引入antd样式 @import '~ant-design-vue/dist/antd.less'; ps：得是less样式 3. 自定义主题 @primary-color: #ec7d2e; // 全局主色 @menu-item-color: @text-color; @menu-highlight-color:
vue3+antd项目总结
荔枝味大鹅的博客
07-21 3367
vue3+antd项目总结
vue集成ant-design-vue
归小超博客
12-08 1696
vue 集成 ant-design-vue
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DVTOP

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值