微信小程序npm安裝有贊UI 組件庫

微信小程序可以npm安裝UI組件庫，文檔位置：https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

npm需要先安裝node，直接到https://nodejs.org/en/，下載安裝node即可使用npm了。

然後到小程序自己目錄下打開cmd。

記住步驟不要錯：

第一步：npm init

然後一直回車，喜歡填也可以填版本資料等。

第二步：npm install --production

有讚的UI組件庫：https://github.com/youzan/vant-weapp

第三步：執行：npm i @vant/weapp -S --production 安裝有贊UI

然後自己小程序目錄下多了一個node_modules目錄，裏面就是自己剛下載的@vant有讚的一些UI組件。

找到這個工具——構建npm。便會在自己小程序目錄下生成miniprogram_npm目錄。比如想使用按鈕 ，就在miniprogram_npm\@vant\weapp\button中。

在詳情中，選上使用npm模塊。

以按鈕組件爲例，只需要在 json 文件中引入按鈕對應的自定義組件即可:

{
  "usingComponents": {"van-button": "@vant/weapp/button/index"},
  "navigationBarTitleText": "社區",
  "enablePullDownRefresh": true
}

接着就可以在 wxml 中直接使用組件:

<van-button type="primary">按鈕</van-button>