vue集成ant-design-vue

news2024/11/19 8:34:10

因为需要集成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.coloradmin.cn/o/72336.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Docker[3]-Docker的常用命令

1 帮助命令 命令说明docker version查看docker的版本信息docker info查看docker详细的信息docker --helpdocker的帮助命令,可以查看到相关的其他命令 docker version docker info docker --help 2 镜像命令 镜像命令说明docker images列出本地主机上的镜像docker …

论文投稿指南——中国(中文EI)期刊推荐(第3期)

🚀 EI是国际知名三大检索系统之一,在学术界的知名度和认可度仅次于SCI!🎄🎈 【前言】 想发论文怎么办?手把手教你论文如何投稿!那么,首先要搞懂投稿目标——论文期刊。其中&#xf…

DBCO试剂Acrylate-PEG5-DBCO,DBCO-PEG5-Acrylate应用生物标记

基础产品数据(Basic Product Data): CAS号:N/A 中文名:二苯并环辛炔-五聚乙二醇-丙烯酸酯 英文名:DBCO-PEG5-Acrylate,Acrylate-PEG5-DBCO 结构式(Structural)&#xff1…

JAVA SCRIPT设计模式--行为型--设计模式之Interpreter解释器模式(15)

JAVA SCRIPT设计模式是本人根据GOF的设计模式写的博客记录。使用JAVA SCRIPT语言来实现主体功能,所以不可能像C,JAVA等面向对象语言一样严谨,大部分程序都附上了JAVA SCRIPT代码,代码只是实现了设计模式的主体功能,不代…

企业微信如何设置文件权限?

当企业使用企业微信移动办公时,有些员工想要上传一些私人文件到企业微信微盘中“我的文件”里保存,但是又担心管理员可以看到,那么该如何设置文件权限呢? 前言 企业微信的会话内容存档功能可以在员工与客户知情的情况下存储聊天记…

linux系统怎么远程进服务器

linux系统怎么远程进服务器 我是艾西,还是有很多小白同学问我linux系统服务器怎么远程连接。那么今天我们重点来教教大家如何用电脑远程服务器配上图文教程,让不懂的新手小白一看就会,分分钟上手教程 远程服务器需要一台电脑俗称“PC”就是我…

i.e., namely, that is区别

i.e. 用作同位语,“即” To buy the car that I really want (i.e., a Tesla), I will have to work a lot of overtime. namely 用作插入语,表示列举,”也就是” The present paper evaluates the effect of major weather variables, nam…

阿里云国际版代充-对象存储OSS可应用哪些场景?

阿里云国际版对象存储OSS是一款海量、安全、低成本、高可靠的云存储服务,可提供99.9999999999%(12个9)的数据持久性,99.995%的数据可用性。多种存储类型供选择,全面优化存储成本。 阿里云国际版OSS具有与平台无关的RE…

谷粒商城6:反向代理与性能优化

0.thymeleaf的复习 1.nginx反向代理 nginx的整体框架 访问流程 域名访问->在本地host文件中查找对应ip->找到了访问 找不到->DNS域名解析来解析域名到ip->找到了访问整体配置流程: 本机内: 查看域名的映射规则 在host文件中增加gulimall.co…

立创EDA极速入门(2)——完成一个STM32最小系统板

请提前观看:立创EDA极速入门(1)——熟悉PCB和立创EDA基本操作; 邀请加入嵌入式社区,您可以在上面发布问题,博客链接,公众号分享,行业消息,招聘信息等。 立创EDA绘制PCB只…

javaweb系统实现中遇到的问题

1.顶部导航栏 2.字符串转换成double 3.session的使用 4.eclipse如何debug 5.debug的查看变量的窗口 6.navicat设置默认值失效 7.javax.servlet.ServletException: 8.java.lang.NoSuchMethodError/java.lang.nullpointerexception 1.[html 简单顶部导航栏top-bar实现 csshtml](h…

高通Ride软件开发包使用指南(4)

高通Ride软件开发包使用指南(4)5 刷写SoC镜像5.2 高通镜像刷写加载器5.2.1 下载QFIL5.2.2 紧急下载模式设置SOC5.2.2.1 Switches5.2.2.2 测试自动化控制器脚本5.2.2.3 快速启动模式5.2.2.3.1 使用 Fastboot 擦除5.2.3 Flashing5.2.3.1 使用 Meta build 刷…

Unity Addressables资源管理 安装和使用本地加载

1.安装 打开Unity内置的 PackagerManager窗口 搜索Add即可找到 安装版本为1.19.19 2.添加Group 点击 Group 菜单 打开窗口 点击 Create Addressables Settings 创建可寻址设置 Assets下会生成一个 AddressableAssetsData 文件夹 其中可以看见面板中的 Default Local Grou…

猿如意中的【Dev C++】工具详情介绍

文章目录一、工具名称二、下载安装渠道2.1 什么是猿如意?2.2 如何下载猿如意?2.3 如何在载猿如意中下载开发工具?三、工具介绍四、软件截图五、软件使用教程六、体验感受一、工具名称 Java SE Development Kit 8 二、下载安装渠道 Java SE…

计算机毕业论文java毕业设计选题源代码javaweb党员信息管理系统

💖💖更多项目资源,最下方联系我们✨✨✨✨✨✨ 目录 Java项目介绍 资料获取 Java项目介绍 3.1.1 技术可行性 本系在架构选择上采用了当今使用较为广泛的B/S,本次毕业设计采用的B/S的优点在开发好程序后可以随意根据客户提出的…

神级框架 - MyBatis【初阶】

目录 1. 什么是 MyBatis 2. 如何学习 MyBatis 2.1 搭建 MyBatis 开发环境 2.2 使用 MyBatis 模式和语法操作数据库 2.2.1 MyBatis 的组成 2.2.2 MyBatis 实现查询功能 2.2.3 MyBatis 实现新增功能 2.2.3 MyBatis 实现删除功能 2.2.3 MyBatis 实现修改功能 3. 在 MyBatis…

XC7A50T-1FTG256I、XC6SLX150-2FGG900I嵌入式FPGA 技术参数

XC7A50T-1FTG256I IC FPGA 170 I/O 256FTBGA(图左) 说明:Artix-7 FPGA能够在多个方面实现更高的性价比,这些方面包括逻辑、信号处理、嵌入式内存、LVDS I/O、内存接口,以及收发器。Artix-7 FPGA非常适合用于需要高端功…

论文阅读笔记 | 三维目标检测——PV-RCNN++算法

如有错误,恳请指出。 文章目录1. 背景2. 网络结构2.1 Sectorized Proposal-Centric SamplingProposal-Centric FilteringSectorized Keypoint Sampling2.2 VectorPool Aggregation3. 实验结果paper:《PV-RCNN: Point-Voxel Feature Set Abstraction With…

STM32F4 | GPIO工作原理和配置 | GPIO库函数 | IO口操作步骤

文章目录一、GPIO基础知识1.GPIO是什么?2.引脚和GPIO的区别和联系?3.绝多数引脚都是GPIO,有限的引脚怎么实现更多的功能?4. 怎么知道具体的芯片外设资源?5.怎么查看GPIO引脚功能?二、GPIO的8种工作模式三、GPIO寄存器…

腾讯Robotics X Lab低电压电刺激触觉方案,单手指25个电极

关于体感手套的案例,青亭网曾经报道过许多种,有低成本的DIY阻力模拟手套,也有价格昂贵的启动微流体VR手套方案,或是基于SMA驱动器、SMI压力传感器的手套技术。但是,要模拟人类体感系统多样且敏感的触觉体验&#xff08…