微信小程序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的工程

 

 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="../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文件里再引入組件即可即可