微信小程序引入VANT組件

1.右鍵項目名稱->在終端中打開
clipboard.png
2.在終端輸入 npm init 用來初始化,然後一直回車默認就Ok。
之後項目中會出現 project.config.json
clipboard.png
內容爲當前項目的配置信息以及依賴包的管理。
3.安裝vant依賴包(在終端輸入)

npm i vant-weapp -S --production

clipboard.png

4.進入小程序開發工具,選擇左上角 工具->構建npm
clipboard.png
完成之後項目裏會多出依賴包

clipboard.png

5.點擊右上角詳情並勾選使用npm模塊。
clipboard.png
6.選擇要在哪個pages裏使用該組件
這裏以pages下的movie舉例,寫一個簡單的按鈕。
如圖 在對應的json文件中引入vant的button
clipboard.png
7.在對應wxml文件,寫如下代碼:

<van-button type="default">默認按鈕</van-button>
<van-button type="danger">主要按鈕</van-button>

clipboard.png
效果圖如下:

clipboard.png

注意:若樣式沒出來,重複步驟4。

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