微信小程序引入VANT組件的方法步驟
更新時間：2019年09月19日 09:54:26 作者：薇薇
這篇文章主要介紹了微信小程序引入VANT組件的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
1.右鍵項(xiàng)目名稱->在終端中打開
2.在終端輸入 npm init 用來初始化，然后一直回車默認(rèn)就Ok。
之后項(xiàng)目中會出現(xiàn) project.config.json
內(nèi)容為當(dāng)前項(xiàng)目的配置信息以及依賴包的管理。
3.安裝vant依賴包(在終端輸入)
npm i vant-weapp -S --production
4.進(jìn)入小程序開發(fā)工具，選擇左上角 工具->構(gòu)建npm
完成之后項(xiàng)目里會多出依賴包
5.點(diǎn)擊右上角詳情并勾選使用npm模塊。
6.選擇要在哪個pages里使用該組件
這里以pages下的movie舉例，寫一個簡單的按鈕。
如圖 在對應(yīng)的json文件中引入vant的button
7.在對應(yīng)wxml文件，寫如下代碼：
<van-button type="default">默認(rèn)按鈕</van-button> <van-button type="danger">主要按鈕</van-button>
效果圖如下：
注意：若樣式?jīng)]出來，重復(fù)步驟4。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js中的數(shù)組轉(zhuǎn)樹型結(jié)構(gòu)方式
這篇文章主要介紹了js中的數(shù)組轉(zhuǎn)樹型結(jié)構(gòu)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
微信小程序使用map組件實(shí)現(xiàn)路線規(guī)劃功能示例
這篇文章主要介紹了微信小程序使用map組件實(shí)現(xiàn)路線規(guī)劃功能,結(jié)合具體實(shí)例形式分析了微信小程序基于map組件的地理位置獲取、路徑規(guī)劃等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
本文介紹了如何通過裝飾器實(shí)現(xiàn)GET請求,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-10-10
這篇文章主要介紹了javascript圖片預(yù)加載的方法,實(shí)例分析了javascript實(shí)現(xiàn)圖片預(yù)加載的方法與相關(guān)注意事項(xiàng),具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義tabbar組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
發(fā)兩個小東西，ASP/PHP 學(xué)習(xí)工具。 用JavaScript寫的
發(fā)兩個小東西，ASP/PHP 學(xué)習(xí)工具。 用JavaScript寫的...2007-04-04
JS實(shí)現(xiàn)二叉查找樹的建立以及一些遍歷方法實(shí)現(xiàn)
本篇文章主要介紹了JS實(shí)現(xiàn)二叉查找樹的建立以及一些遍歷方法實(shí)現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-04-04
JavaScript實(shí)現(xiàn)在頁面間傳值的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)在頁面間傳值的方法,涉及javascript傳值的技巧,非常具有實(shí)用價值,需要的朋友可以參考下2015-04-04
Android中Okhttp3實(shí)現(xiàn)上傳多張圖片同時傳遞參數(shù)
本篇文章主要介紹了Android中Okhttp3實(shí)現(xiàn)上傳多張圖片同時傳遞參數(shù) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)盒子拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02