微信小程式中引用vant元件庫

步驟

1、vant元件庫裡面也有說明，它說package.json 和 node_modulles 必須在miniprogram目錄下，可是一般你剛新建一個小程式專案的時候，是沒有package.json檔案的，所以你要初始化一下，方法如下

• 開啟你新建的小程式專案的根目錄，我這裡是minicode，當然你不要看我這裡有package.json檔案啊，我是後來成功了才有的。
• 在這個根目錄用cmd開啟，並輸入npm init -y，並回車，你的專案中就會有package.json檔案了
  
  

2、接著還是在小程式專案的根目錄輸入

npm i @vant/weapp -S --production

這是官方文件給的，可以開啟看一下https://youzan.github.io/vant-weapp/#/intro，輸入完畢之後你的專案裡面就會有node_modulles資料夾了。（還沒有結束。。）

3、開啟你的微信開發者工具，點選詳情，選擇本地設定，並勾選使用npm模組

4、點選工具欄，在選擇構建npm，此時你的專案的根目錄就會出現miniprogram_npm資料夾

5、這下就可挑選你想要的元件了，這裡我以引入一個按鈕為例子吧。

• 開啟官網 https://youzan.github.io/vant-weapp/#/button
• 然後在app.json檔案裡面配置一下，這樣我們就可以全域性使用，即每個頁面就都可以引用了。配置方法是將如下程式碼新增到app.json中

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

• 然後複製你在官網上看的button按鈕元件程式碼到你想要的頁面中去，如下
  

完結撒花~?