微信小程序開發者工具構建npm提示沒找到node_modules目錄

 

 

一、官網給的文檔寫的不夠充分，需要你充分理解npm的使用方法，才能明白的；

二、第一步：先在你電腦上安裝npm 參考下面文章

https://www.cnblogs.com/zmdComeOn/p/11543441.html

三、第二步：

       1、第一步：打開終端 cd 到項目目錄下 輸入如下命令： npm init 如下圖所示

　　　　

 

 　　 輸入命令后一直點回車，如下圖：

　　　　

       2、第二步：輸入如下命令 npm install --production

       3、第三步：輸入如下命令 npm i vant-weapp -S --production  （此命令為要構建的代碼包，如果想構建其他代碼包，只需輸入其他對應的命令即可）

　　如下圖里面有的兩個包構建的文件 命令分別如下 (npm i miniprogram-sm-crypto --production 和 npm i vant-weapp -S --production  和  npm install weui-miniprogram --save --production)

　　

 

 

 

四、還要注意一點就是微信開發者工具要更新到最新版本，不然點擊工具沒有構建npm這一欄，

      執行命令完之后，然后再去微信開發者中點工具-構建npm，

   　　

 

 

      然后就成功了，如下圖：

 

五、下面以引入button組件到某頁面為例子：

在此頁面的.json中配置

"usingComponents": {
"van-button": "../../miniprogram_npm/vant-weapp/button/index"
},

然后在此頁碼的wxml中

<van-button type="default">默認按鈕</van-button>
<van-button type="primary">主要按鈕</van-button>
<van-button type="info">信息按鈕</van-button>
<van-button type="warning">警告按鈕</van-button>
<van-button type="danger">危險按鈕</van-button>

重新編譯項目 發現 已經正常引用了！下面是vant-weapp文檔教程

六、vant-weapp使用教程文檔 https://youzan.github.io/vant-weapp/#/quickstart