使用vant组件发现样式和官网的样式不完全一样

项目场景：

想直接采用vant官网的组件，显示list和标题

 

问题描述

使用vant组件发现样式和官网的样式不完全一样(这里上述图片已经显示正常)。

 <van-sidebar v-model="activeKey">
      <van-sidebar-item title="标签名称" />
 </van-sidebar>

---

原因分析：

因为是延用原来项目的框架接着进行项目2.0版本的开发，但是因为项目开发时间是很早之前，就现在时间而言，组件库的更新很快，所以会存在版本不匹配的问题。通过版本命令查看，会发现是因为安装的vant版本不是最新版。项目中使用的是 vant@2.2.16，而官网现在使用的是最新的vant@2.12.54，所以会导致样式不能和官网显示的一样。

PS：如果你的是因为样式完全不展示，可以试试按照其他大佬的方法可以解决。简而言之，是在main.js全局引入样式, 或者按需引入，或者是利用babel-plugin-import 插件自动引入，注意配置好babel.config.js。

---

解决方案：

解决方案很简单就是更新vant组件库的版本就好了。先用命令查看vant版本，如果是最新版本，请参照上面ps中的方法，如果不是最新版本可以通过安装命令更新一下版本，之后就可以正常使用vant组件了。

涉及到的命令：

查看vant版本

npm ls vant

安装vant2最新版本

npm i vant@latest-v2 -S

另外我期间遇到了另外一个问题，当我更新完版本，进行查看时，出现了“npm ERR! code EINTEGRITY”的问题，这边是因为当时采用的更新命令是cnpm i vant@latest-v2 -S,我建议是使用npm i vant@latest-v2 -S即可，值得注意的是，有时候npm升级会遇到这类问题，建议删除node_modules重新npm install。

开发中要使用的框架尽量保证和官网一样的版本，否则可以通过自定义解决，也很方便。