微信小程序引入Vant組件庫

微信小程序引入Vant組件庫

Vant Weapp組件庫:Vant組件庫

說說我在引入vant組件庫的時候的操作方法吧:

1.先在微信開發者工具中打開項目的終端:
在這裏插入圖片描述
2.然後初始化一個package.json文件:輸入命令:npm init

然後一路回車默認的即可:
在這裏插入圖片描述
項目就會產生一個package.json文件:

在這裏插入圖片描述

3.接着在vant組件庫的官網上找到安裝語句:npm i vant-weapp -S --production,在終端輸入安裝命令,點擊回車:
在這裏插入圖片描述
官網安裝語句位置如下:
在這裏插入圖片描述
4.構建npm:在微信開發者工具的菜單欄中找到工具欄的選項“構建npm”,等待構建完成
在這裏插入圖片描述
其中miniprogram_npm下就是vant-weapp組件庫;

5.最後,在微信開發者工具的詳情裏面將“使用npm模塊"勾選上,如下:
在這裏插入圖片描述

6.引用和使用vant組件:(關於如何引用和使用組件可以參考官方文檔噢,很齊全)

以引用button按鈕爲例,官網文檔中都寫的特別詳細了:
在這裏插入圖片描述
根據官網文檔,使用如下:
在這裏插入圖片描述
到此完結,其他組件的使用方法可以參考官網文檔,vant組件庫也有自己的微信小程序文檔,在微信上直接搜索vant即可,有時候多查閱噢。
在這裏插入圖片描述

複製鏈接加入羣聊【小程序+雲開發】:https://jq.qq.com/?_wv=1027&k=5rHG16G
分享不易,點贊關注給作者一點點鼓勵

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章