【微信小程式】小程式內如何匯入vantUI元件

簡單記錄一下如何在微信小程式內引入vantUI元件（親測有效）

1. 以新建一個微信小程式專案為例，新建一個小程式後，開啟微信開發者工具
   
   在開啟後的終端下輸入
   npm i @vant/weapp -S --production
   按下回車

此時，專案根路徑下會出現一個node_modules資料夾，如下圖所示

如果未出現該資料夾，可以點目錄資料夾上的重新整理按鈕，即可重新整理列表

2.完成node_modules依賴安裝後，需要修改app.json檔案，修改如下

將上圖中所框選部分刪除即可

3.專案根目錄下新建package.json檔案,檔案位置及檔案內容如下

{
  "name": "mp-demo1",
  "version": "1.0.0",
  "license": "ISC",
  "dependencies": {
    "@vant/weapp": "^1.0.6"
  },
  "prettier": {
    "printWidth": 120,
    "semi": false,
    "singleQuote": true
  }
}

4.依照下圖中所示的操作步驟，執行npm操作

5.npm完畢後，專案根路徑下會出現一個miniprogram_npm資料夾，如下圖所示，代表構建成功

6.配置小程式使用npm模組，操作步驟如下圖所示，勾選使用npm模組選項

順帶附上如何在頁面下引用UI元件：

我們以使用一個button元件為例

1.首先app.json下需要定義全域性元件的引入配置，如下圖所示

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

2.開啟我們需要使用到button元件的介面，我們以模板專案下的index頁面為例，開啟頁面並在需要使用到的地方加入如下標籤（具體標籤引用方式可以參照官網文件）官網文件

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

ctrl + s 後，頁面即可出現剛才引用的button元件效果，大致效果如下圖所示

---That's all. 如有寫的不好的地方，請不吝指出，多謝閱讀。