因为需要集成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看看