微信小程序npm引入vant-weapp库的方法 _vant-weapp

宁可枝头抱香死，何曾吹落北风中。这篇文章主要讲述微信小程序npm引入vant-weapp库的方法相关的知识，希望能为你提供帮助。
1、终端打开小程序所在目录

文章图片

2、npm init初始化，初始化完成之后，小程序项目中就会出现package.json文件，说明已经初始化成功

文章图片

3、npm install --production 安装生产环境，不要npm install都给装上，以免小程序包过大

文章图片

4、安装vant ：npm i vant-weapp -S --production

文章图片

5、微信开发者工具勾选 npm 构建
a、工具》构建npm
b、详情》使用npm模块
6、最后会形成一个带有avnt-weapp的工程

文章图片

【微信小程序npm引入vant-weapp库的方法】
6、导致这一步基本会报错

VM6419:5 ./miniprogram_npm/_vant-weapp@0.5.12@vant-weapp/action-sheet/index.wxml ../wxs/utils.wxs not found from ./miniprogram_npm/_vant-weapp@0.5.12@vant-weapp/action-sheet/index.wxml > 1 | < wxs src="https://www.songbingjia.com/wxs/utils.wxs" module="utils" /> | ^ 2 | 3 | < van-popup 4 |show="{{ show }}"

解决办法：
删除vant-weapp里的所有文件夹

文章图片

然后去github上 https://github.com/youzan/vant-weapp 下载一份Vant UI，将dist文件夹中的文件复制到 miniprogram_npm/vant-weapp（即下载一份Vant，之后替换掉项目中的文件）之后保存即可解决。
7、哪个页面需要使用对应的组件，哪个页面的json文件里再引入组件即可即可