WePY2安裝與引入Vant Weapp小程序組件

一、Wepy 2.x 安裝

$ npm install @wepy/cli -g # 全局安裝 WePY CLI 工具
$ wepy init standard myproj # 使用 standard 模板初始化項目
$ cd myproj # 進入到項目目錄
$ npm install # 安裝項目依賴包
$ npm run dev # 監聽並且編譯項目

　　

根據wepy官網安裝步驟使用npm安裝

1.安裝過了的童鞋，可跳過第一步

npm install @wepy/cli -g

2.查看wepy版本（可略過），確保安裝的是最新版本 

wepy -v

3.初始化項目

npm install

4.  進入到項目目錄

cd myproj 

5. 安裝依賴包

npm install 

6. 開啟實時編譯（建議新建一個命令窗開啟實時編譯）

npm run dev

此時我們的項目就已經安裝並創建完成了，可導入微信開發者工具查看

7.導入微信開發者查看是否正常


頁面顯示正常且並無報錯的話我們就開始進行下一步（若有錯誤請查看是否按照當前步驟進行，或將項目刪除后重新創建）
參考Wepy官網：https://wepyjs.github.io/wepy-docs/2.x/#/base/getstart

二、安裝Vant組件並引入到項目

1.建議使用npm安裝Vant組件
 官方給出了三個安裝方式

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

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

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

　　在項目根目錄下安裝

npm i @vant/weapp -S --production

　　

　　安裝完成后在package.json頁面出現 "@vant/weapp": "^1.5.0", 即安裝成功

       

2.將項目用VScode打開，刪掉index.wpy頁面內多余代碼，（打開同時確保實時編譯已運行）
如下：


3.引入Vant組件

將 "van-button": "@vant/weapp/button/index"引用路徑改為

   "van-button": "module:@vant/weapp/dist/button/index"

在index.wpy頁面內引入button按鈕組件

<config>
{
    usingComponents: {
      "van-button": "module:@vant/weapp/dist/button/index"
    }
}
</config>

如下：

　　4.保存，查看引入是否成功

組件正常顯示且並未報錯，引入組件成功
參考：wepy官方 --> 組件 --> 使用組件
 Vant官網：https://vant-contrib.gitee.io/vant-weapp/