在uni-app中使用vant組件的方法
前言:
最近在做uni-app的時候需要用到vant組件,在網(wǎng)上看到了很多的使用vant組件的方法,但是講解的大多繁瑣,或者無法使用,現(xiàn)把最新,最實用的vant組件的使用方法分享給大家。
步驟一:
打開 Hbulider x ,然后新建項目;

步驟二:
填寫項目名稱,選擇模板,vue技術(shù)棧,...詳細如圖,然后點擊創(chuàng)建即可

步驟三:
在與pages 同級目錄先創(chuàng)建一個 名稱為: wxcomponents 的文件夾,不會操作的話看圖。

步驟四:
在我們剛才新建的wxcomponents 目錄下新建一個 @vant 的文件夾,建立目錄方法就和步驟三一樣,只不過這一次我們要在 wxcomponents 目錄下建立 子目錄 @vant

步驟五:
瀏覽器打開 這個鏈接:
vant-weapp GitHub官方文檔https://github.com/youzan/vant-weapp/releases 下載如圖所示的壓縮包

? 步驟六:
打開壓縮包后,將文件夾打開,然后找到 dist 文件夾, 將這個文件夾復(fù)制粘貼到 我們步驟四 新建的 @vant 空文件夾中 ,并且改名為: weapp, 如圖所示:

步驟七:
在全局的page.json進行全局注冊,使它變成全局可用!如圖所示:


寫在最后:
為什么我們要改文件夾名字,因為我們看到,vant組件內(nèi)部給我們的 引入方案就是 :

那我們這樣創(chuàng)建文件夾,和它嵌套的路徑一樣,是不是后面使用復(fù)制vant 提供的路徑就OK了?
這樣更省時間,更省事。
再多提一嘴,vant組件是配合原生小程序使用的,所有有些地方,比如data數(shù)據(jù)渲染,我們不能直接照抄,一般用vue的思路就可以解決啦。
到此這篇關(guān)于在uni-app中使用vant組件的方法的文章就介紹到這了,更多相關(guān)uni-app使用vant組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue中父子組件注意事項,傳值及slot應(yīng)用技巧
這篇文章主要介紹了vue中父子組件注意事項,傳值及slot應(yīng)用技巧,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05
vue實現(xiàn)數(shù)字動態(tài)翻牌的效果(開箱即用)
這篇文章主要介紹了vue實現(xiàn)數(shù)字動態(tài)翻牌的效果(開箱即用),實現(xiàn)原理是激將1到9的數(shù)字豎直排版,通過translate移動位置顯示不同數(shù)字,本文通過實例代碼講解,需要的朋友可以參考下2019-12-12
vue2 router 動態(tài)傳參,多個參數(shù)的實例
下面小編就為大家?guī)硪黄獀ue2 router 動態(tài)傳參,多個參數(shù)的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
vue?element修改el-select控件長度style=“width:XXpx“不生效的解決
這篇文章主要介紹了vue?element修改el-select控件長度style=“width:XXpx“不生效的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07
Vue2.0實現(xiàn)簡單分頁及跳轉(zhuǎn)效果
這篇文章主要為大家詳細介紹了Vue2.0實現(xiàn)簡單數(shù)據(jù)分頁,及頁數(shù)的跳轉(zhuǎn)效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-07-07

