vue集成ant-design-vue

news/2024/10/20 20:37:11/

因为需要集成ant-design-vue,所以我在老的vue项目上进行集成,这不集成不要紧,一集成项目都起不来,下面进行下梳理

1遇到问题:
BrowserslistError: Unknown browser query dead

查资料得到;
1.删除package.json文件里 browserslist配置
2.修改browserslist配置内容(删去not dead)

"browserslist": ["last 2 versions","android 4","opera 12"
]

3.重新配置新的.browserslistrc,从package.json中剥离出来(抛出异常BrowserslistError: Unknown browser query {`` )

试了三面种,全部都挂了,项目跑不起来,那换个方向,因为报错都是从ant-design-vue/dist/antd.css这里抛出,那再加载个css-loader试试,但是还是不行,这就让我比较难受了

那挂老项目不行,于是我自己新建一个项目
第一步:

$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

第二步:

$ vue create antd-demo

第三步:

$ npm i --save ant-design-vue

最后,然后main.js引入:

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';Vue.use(Antd);

到这里都很顺利,看来要成功了呀,尝试跑了一下,能跑起来,但是界面报错:

TypeError: this.getOptions is not a function

到这里,我就大致知道了,大概率是 版本不兼容 的问题了

于是,在新项目上降低ant-design-vue版本:
先卸载npm uninstall ant-design-vue,然后npm i --save ant-design-vue@1.7.2
然后跑了一下,OK,成了!

原来官网的右上角有说明不同的版本
在这里插入图片描述官网的安装指令只适用于vue3,而在创建选择vue的时候选择的是vue2.x,并不兼容最新版本的ant-desing-vue,vue2对应1.7.X系列

之前使用的都是elementUI,从个人角度来说elementUI更顺手一些,文档也更清晰一些,毕竟先入为主嘛!那这次就试试ant-design-vue看看


http://www.ppmy.cn/news/2702.html

相关文章

【Paper】2020_离散多智能体系统的事件触发二分一致性研究_刘雨欣

文章目录第 4 章 有向符号图下离散多智能体系统的事件触发二分一致性4.3.1 示例一4.3.2 示例二系统 动态方程、控制输入及事件触发条件分别如式(2.1)、(3.1)及式(3.6)所示。 本文考虑一阶离散多智能体系统,第 iii 个智能体的动态方程如下: xi(k1)xi(k)ui(k)(2.1)\b…

早,每天都是一段全新的旅程

哈喽,大家早上好。 真的很抱歉近一年没有更新文章。不过,我现在准备重整旗鼓哦,用业余时间继续学习前后端知识。之所以用业余时间,是因为我已经成功入职上海联通啦,虽然做的工作和大学专业不太一样,没能成…

10万字208道Java经典面试题总结(附答案)一

11、String 类的常用方法都有那些? equals、length、contains、replace、split、hashcode、indexof、substring、trim、toUpperCase、toLowerCase、isEmpty等等。 12、普通类和抽象类有哪些区别? 抽象类不能被实例化; 抽象类可以有抽象方法&…

安卓期末大作业——售票APP源码和设计报告

大作业文档 项目名称:售票app专业:班级:学号:姓名: 目 录 目录 一、项目功能介绍3二、项目运行环境31、开发环境32、运行环境33、是否需要联网3三、项目配置文件及工程结构31、工程配置文件32、工程结构目录4四、项…

【C++笔试强训】第四天

文章目录选择题编程题选择题 #include<iostream> #include<cstdio> using namespace std; int main(){int m0123, n123;printf("%o %o\n", m, n);return 0; }程序运行后的输出结果是&#xff08;&#xff09; A 0123 0173 B 0123 173 C 123 173 D 173 1…

算法面试题——删除链表后第N个节点

给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], n 2 输出&#xff1a;[1,2,3,5] 示例 2&#xff1a; 输入&#xff1a;head [1], n 1 输出&#xff1a;[] 示例 3&#xff…

蜂鸟E203学习笔记(六)——交付

1.1 处理器中指令的交付、取消、冲刷 1.1.1 指令交付、取消和冲刷 影响指令交付的因素&#xff1a; 中断、异常以及分支预测指令造成流水线冲刷ARM中存在条件码&#xff0c;只会取消自己不会造成流水线冲刷 交付的位置 执行阶段&#xff08;&#xff09;完成分支预测之后写…

【实操篇】Linux组管理

目录 ●组管理 ●linux组的基本介绍 ●组的创建以及对用户的操作&#xff08;复习&#xff09; ●查看文件的所有者 ●改变文件所有者 ●修改文件所在的组 ●改变用户所在组 ●linux组的基本介绍 在Linux中的每个用户必须属于一个组&#xff0c;不能独立于组外。并且在Li…