微信小程序使用npm的步驟

這里我們以npm引入小程序的官方UI組件weui-miniprogram為例

1. 在小程序根目錄內(nèi)通過cmd，初始化npm 一路回車

npm init

2. 在小程序中執(zhí)行安裝命令npm包 (weui-miniprogram)：

npm install --save-dev weui-miniprogram
或
npm i @vant/weapp -S --production

3. 構(gòu)建npm包
   打開微信開發(fā)者工具，點擊 工具 -> 構(gòu)建 npm，并勾選 使用 npm 模塊 選項，構(gòu)建完成后，即可引入組件

4. 修改app.json

將 app.json 中的 “style”: “v2” 去除，小程序的新版基礎(chǔ)組件強行加上了許多樣式，難以去除，不關(guān)閉將造成部分組件樣式混亂。

5. 引入組件 以 Button 組件為例，只需要在app.json或index.json中配置 Button 對應(yīng)的路徑即可。如果你是通過下載源代碼的方式使用 @vant/weapp，請將路徑修改為項目中 @vant/weapp 所在的目錄。

     // 例  app.json
        "usingComponents": {
             "van-button": "@vant/weapp/button/index"
             }

6. 引入組件

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