使用vant構建一個微信小程序

1、新建一個空白小程序

按照vant官網執行第一步：

# 通過 npm 安裝
npm i @vant/weapp -S --production

# 通過 yarn 安裝
yarn add @vant/weapp --production

# 安裝 0.x 版本
npm i vant-weapp -S --production

//三選其一

2、初始化：

npm init 

本地設置這兩個勾上。

3、然後，小程序開發者工具點擊頭部“工具”，點擊構建NPM。

要是報錯：沒有可以構建的npm，那麼執行一下：

npm i miniprogram-sm-crypto --production

然後再重複一下第三步就可以啦。

4、使用。

確保 小程序目錄結構如下：

先去掉app.json裏的： "style": "v2" 

然後引入組件：

// 通過 npm 安裝
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}


// 通過下載源碼使用 es6版本
// app.json
"usingComponents": {
  "van-button": "path/to/@vant/weapp/dist/button/index"
}


// 通過下載源碼使用 es5版本
// app.json
"usingComponents": {
  "van-button": "path/to/@vant/weapp/lib/button/index"
}


//三選一，正常步驟是選第一個。

在wxml頁面就可以直接用<van-button>這個標籤了。