微信小程序 引入vant Weapp组件库的问题及处理方式

1、首先初始化并安装，记住按照这个顺序来，不要错了

npm init  //一路回车
npm install --production
npm i @vant/weapp -S --production

使用cmd后输入npm init 出现的界面一路回车就行

image.png

2、在小程序的本地设置勾选使用npm

image.png

3、 在小程序工具--构建npm

image.png

4、构建成功后会出现miniprogram_npm文件夹

image.png

5、引用vant组件

//在对应页面的json
"usingComponents": {
    "van-icon": "@vant/weapp/icon/index",
    "van-search": "@vant/weapp/search/index"
 }
<van-search shape="round" custom-class="search-box" background="none" readonly="{{ true }}" placeholder="请输入产品或门店" bindtap="jumpSearch" />

5.1、在app.css中引用vant内置样式css,按照官网的“@import '@vant/weapp/common/index.wxss';”路径报错找不到，修改为如下路径

@import '/miniprogram_npm/@vant/weapp/common/index.wxss';

5.2： 将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以去除，不关闭将造成部分组件样式混乱。

6、成功
————————————————
版权声明：本文为CSDN博主「余温无痕」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u014678583/article/details/106971149/