微信小程序引入Vant組件庫

前期准備

Vant Weapp組件庫：https://youzan.github.io/vant-weapp/#/intro

1.先在微信開發者工具中打開項目的終端：

然后初始化一個package.json文件：輸入命令：npm init

 

然后一路回車默認的即可：

 

npm init

 

 項目就回產生一個package.json文件：

{
  "name": "miniprogram",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

2.接着在vant組件庫的官網上找到安裝語句：

npm i vant-weapp -S --production，在終端輸入安裝命令，點擊回車：

 

npm i vant-weapp -S --production

 

 

3.構建npm：

在微信開發者工具的菜單欄中找到工具欄的選項“構建npm”，等待構建完成

 

 

4.引用和使用vant組件：

（關於如何引用和使用組件可以參考官方文檔噢，很齊全）

以引用button按鈕為例，官網文檔中都寫的特別詳細了：