微信小程序雲開發個人博客項目實戰（2）---引入-Vant-Weapp-小程序-UI-組件庫

微信小程序雲開發個人博客項目實戰目錄

一、准備工作
二、引入 Vant Weapp 小程序 UI 組件庫
三、專題的增刪改查
四、文章的增刪改查
五、雲函數獲取微信公眾號access_token
六、雲函數同步公眾號文章到小程序

Vant Weapp 是移動端 Vue 組件庫 Vant 的小程序版本，兩者基於相同的視覺規范，提供一致的 API 接口，助力開發者快速搭建小程序應用。
地址：https://youzan.github.io/vant-weapp

一、安裝

1、微信開發工具中，miniprogram 右鍵 選擇在終端打開

2、終端執行 npm init 命令

$ npm init

生成 package.json 文件

3、安裝

$ npm i @vant/weapp -S --production

二、構建 npm 包

打開微信開發者工具，點擊 工具 -> 構建 npm，並勾選 使用 npm 模塊 選項，構建完成后，即可引入組件

三、使用

1、引入組件

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

// app.json或xxx.json
"usingComponents": {
  "van-button": "@vant/weapp/button"
}

2、使用組件

引入組件后，home.wxml 中直接使用組件

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

效果：