ant-design 组件引用报错

最新推荐文章于 2025-06-24 17:13:26 发布
原创 最新推荐文章于 2025-06-24 17:13:26 发布 · 1.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ant-design

本文记录了在使用ant-design-vue@1.7.4时遇到的组件ID冲突和数据编译错误，问题源于Vue版本低于2.6.0导致的不兼容。解决方案是升级Vue到2.6.0以上，同时安装缺失的vue-template-compiler。此外，还提醒开发者注意检查并安装所有必要的peer dependencies。

正常引用ant-design-vue，版本号为1.7.4

使用组件时报错，Do not use built-in or reserved HTML elements as component id：Select   如图：

提示意思为组件名不能和html标签重复，但是使用的是ant里的组件<a-select>啊

同时使用<a-table>时报另外的错误：Error in data(): "TypeError: __WEBPACK_IMPORTED_MODULE_27_vue__.default.observable is not a function"

搜错半天不知道是什么原因，直到执行npm install 的时候发现Terminal提示

ant-design-vue@1.7.4 requires a peer of vue@^2.6.0 but none is installed. You must install peer dependencies yourself.

ant-design-vue@1.7.4 requires a peer of vue-template-compiler@^2.6.0 but none is installed. You must install peer dependencies yourself.

才知道要求vue版本不得低于2.6.0才可以正常使用ant-design

特此记录一下

 

vue3+vite - 安装引入Ant Design Vue组件库报错Failed t resolve import“ant-design-vue/dist/antd.css“ from x Does
高级前端工程师
12-22 7502
vue3，vite，ant design vue，组件库，安装引入报错，vue3使用antd报错，vue3引入ant组件库报错，antd.css这个引入失败怎么办，已经安装了Antd组件库但无法使用，报错无法解析antd.css文件，vue3.0引入antdv在main.ts中报错，vite + vue3引入ant design vue 报错，引入import ‘ant-design-vue/dist/antd.css‘时报错，详细解决方案，换版本也不行，详细解决方案，依旧报错，改了版本号，重新安装依赖也不
Ant-Design-Vue快速上手指南+排坑
破损的天堂鸟博客
08-24 2106
Ant-Design-Vue 是 Ant Design 的 Vue 实现，提供了一套高质量的 UI 组件库，适用于各种类型的 Web 应用开发。
【vue】vue3.0中使用ant Design vue
前端学习记录
05-05 1859
ant design vue pro 按需引入 import {Button} from 'ant-design-vue'; app.use(Button); ant design vue pro 全局引入 import Antd from 'ant-design-vue'; app.use(Antd); ant design vue pro icon 按需引入（组件方式） import {UserOutlined} from '@ant-design/icons-vue' app.component(
VUE3.0+ANTDESIGN，含ant-design/icon-vue加载
李小砍的技术博客
09-30 1910
目录一、全面加载Antd （不含 icon)二、按需加载，减少体积1 使用 babel-plugin-import（推荐）。（1）全局调用,无加加载icon（2）组件调用(含ant-design/icon-vue加载)2.手动引入 npm install -g @vue/cli@next vue create vueapp //选择vue3 cd vueapp npm i --save ant-design-vue@next //测试版，稳定版好像不正常工作 npm i babel-plugin-impo
在vue中使用ant-design-vue组件
热门推荐
qq_49723651的博客
03-30 3万+
在vue中使用ant-design-vue组件 文章目录在vue中使用ant-design-vue组件1. 安装2. 引入组件库3. 使用3.1 按钮样式3.2 导航栏样式3.3 表单样式 官方地址：Ant Design Vue 1. 安装 首先使用vue-cli创建项目，然后进入项目，使用npm安装ant-design-vue库： npm i --save ant-design-vue@next 然后在package.json文件中的dependencies中看见刚刚下载的库： 2. 引入组件库
安装AntDesign时，解决报错peerDependencies WARNING ...requires a peer of XXX but none was installed
Easylee的博客
05-17 2万+
安装AntDesign时
vue2安装ant-design UI报错 ERR! peer vue@“＞=3.2.0“ from ant-design-vue@3.2.15
爱就码上行动，奔赴热爱，追光而行。愿你带着从容与热爱，拥抱每一天的惊喜与美好
02-23 3569
npm install ant-design-vue --save安装报错，使用的是vue2，如图，npm ERR! peer vue@">=3.2.0" from ant-design-vue@3.2.15，解决方法:......
vue3+vite,自动按需引入ant-design-vue3x报错
小花同学
09-20 1430
vue3+vite项目，自动按需引入ant-design-vue3x报错：Failed to resolve import "ant-design-vue/es/button/style/css" from "src\views\ant-d-v-test.vue"
ant-design-vue按需加载的坑的解决
11-20
在Vue.js开发中，我们经常使用Ant Design Vue作为前端UI框架，它提供了丰富的组件和优雅的设计风格。然而，在实际开发过程中，我们可能会遇到一些技术挑战，例如按需加载（tree shaking）Ant Design Vue时出现的编译...
Vue开发-ant-design-vue使用Modal弹框时控制台出现 [Vue warn]: Failed to resolve directive: ant-portal
觉醒法师的专栏
11-16 819
近期在项目中，在控制台发现一个警告信息【[Vue warn]: Failed to resolve directive: ant-portal】，虽然不影响Modal弹框的使用，但是看着挺碍眼，一操作就频繁出现。，其实让它消失很简单，有两个解决方案，选择一种自己使用的即可。
antdesign浏览器引用
08-09
antdesign 浏览器引用例子
html中如何用vue语法，并使用UI组件库 ，html中引入vue+ant-design-vue或者vue+element-plus
夜空孤狼啸的博客
08-30 4249
html中如何用vue语法，并使用UI组件库 ，html中引入vue+ant-design-vue或者vue+element-plus，本次项目中，需要引入github中别人写好的插件，插件比较大，没有方法直接在自己项目中，把别人的项目打包合并生成html（类似于前端项目打包生成的 dist ），修改这里面的html，这种情况要么用原生js写或者jquery还相对快一些，那为什么不直接用vue语法呢？哈哈哈，下面就教你怎么写。这里用antDesignVue4.0 直接上代码，
bug：[Vue warn]: Do not use built-in or reserved HTML elements as component id: Component
qq_45796592的博客
04-17 1318
[Vue warn]: Do not use built-in or reserved HTML elements as component id: Component报错解决
Vue2项目引入Antd报错（已解决）
weixin_49993071的博客
04-23 4371
新建了一个Vue2项目，想引入Antd，却发生了两个错误 package.json { "name": "antdpro1", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies":
【Vue】组件ant design of vue
瑞新の博客：bennyrhys
11-09 1257
npm install ant-design-vue@2.0.0-rc.3 --save 项目引入组件
Vue 3 和 Ant Design 版本3.2.20 Table解析
最新发布
csdn_HPL的博客
06-24 587
通过以上配置，你可以灵活地在 Vue 3 + Ant Design Vue 3.2.20 中实现带选择框的表格功能。虽然 Ant Design Vue 3.x 仍支持类似 Vue 2 的模板写法，但官方推荐使用。用法、Composition API 支持等）。组件的使用方式与 Vue 2 版本类似，但需要注意一些细节调整（如。
ant design vue 3.2使用小结
abu04的专栏
06-09 399
嵌套子表格时，默认的子表展开icon【+】是在第一列的，如果想改变其位置，只需要在列定义的colums中追加对应列，列内容为：Table.EXPAND_COLUMN例如把展开icon放在最后一列，
vue3+antdesign3.2.20版本实现可编辑表格及校验
qq_53738230的博客
06-27 765
vue3+antdesign3.2.20可编辑表格及校验
ant-desigin-vue按需导入报错in ./node_modules/ant-design-vue/lib/button/style/index.less
qq_41411324的博客
01-04 1610
less版本问题 将 less 版本降到 3.0 以下，less-loader 降到 5.0.0 npm i --save-dev less@2.7.3 less-loader@5.0.0 less3.0版本会报另一个错，less4.0会报上面的错Possibly missing ‘(’ in mixin call
@ant-design/pro-components ProTable 报错
03-08
### 解决 @ant-design/pro-components ProTable 组件报错问题 当遇到 `@ant-design/pro-table` 或其他 Ant Design Pro Components 报错时，通常可以从以下几个方面排查并解决问题： #### 1. 检查依赖安装情况 确保所有必要的依赖都已正确安装。如果出现模块未找到的错误，可能是由于某些包未能成功下载或版本不兼容。 对于提到的 “Module not found: Can't resolve '@ant-design/pro-field'”，可以尝试重新安装相关依赖来修复此问题[^2]： ```bash npm install --save @ant-design/pro-field ``` 或者使用 yarn 进行安装： ```bash yarn add @ant-design/pro-field ``` #### 2. 清理缓存与重试构建 有时本地 npm/yarn 缓存可能会导致一些奇怪的问题。清理这些工具的全局缓存可能有助于解决此类问题。 ```bash # 对于 npm 用户 npm cache clean --force # 对于 Yarn 用户 yarn cache clean ``` 之后再次尝试启动项目。 #### 3. 更新 Webpack 配置 针对样式文件加载失败的情况（如 `.less` 文件），这通常是 webpack 的配置问题。确认项目的 webpack 配置中包含了处理 Less 文件所需的 loader 和 plugin 设置[^1]。 可以在 `webpack.config.js` 中添加如下配置片段以支持 less 文件解析： ```javascript { test: /\.less$/, use: [ 'style-loader', 'css-loader', { loader: 'less-loader', options: { lessOptions: { javascriptEnabled: true }, }, } ] } ``` #### 4. 使用官方示例作为参考 访问 [Ant Design Pro Table 官方文档](https://procomponents.ant.design/components/table)，这里提供了详细的 API 文档以及多个实用的例子，可以帮助更好地理解和应用该组件的功能特性[^3]。 通过上述方法应该能够有效定位并解决大部分关于 `ProTable` 组件所引发的常见错误。如果有更具体的错误提示信息，则可以根据实际情况进一步调整解决方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值