在uni-app中使用vant組件的方法
前言：
最近在做uni-app的時(shí)候需要用到vant組件，在網(wǎng)上看到了很多的使用vant組件的方法，但是講解的大多繁瑣，或者無法使用，現(xiàn)把最新，最實(shí)用的vant組件的使用方法分享給大家。
步驟一：
打開 Hbulider x ，然后新建項(xiàng)目；
步驟二：
填寫項(xiàng)目名稱，選擇模板，vue技術(shù)棧，...詳細(xì)如圖，然后點(diǎn)擊創(chuàng)建即可
步驟三：
在與pages 同級(jí)目錄先創(chuàng)建一個(gè) 名稱為： wxcomponents 的文件夾，不會(huì)操作的話看圖。
步驟四：
在我們剛才新建的wxcomponents 目錄下新建一個(gè) @vant 的文件夾，建立目錄方法就和步驟三一樣，只不過這一次我們要在 wxcomponents 目錄下建立 子目錄 @vant
步驟五：
瀏覽器打開 這個(gè)鏈接：
vant-weapp GitHub官方文檔https://github.com/youzan/vant-weapp/releases 下載如圖所示的壓縮包
? 步驟六：
打開壓縮包后，將文件夾打開，然后找到 dist 文件夾， 將這個(gè)文件夾復(fù)制粘貼到 我們步驟四 新建的 @vant 空文件夾中 ，并且改名為： weapp, 如圖所示：
步驟七：
在全局的page.json進(jìn)行全局注冊，使它變成全局可用！如圖所示：
寫在最后：
為什么我們要改文件夾名字，因?yàn)槲覀兛吹?，vant組件內(nèi)部給我們的 引入方案就是 ：
那我們這樣創(chuàng)建文件夾，和它嵌套的路徑一樣，是不是后面使用復(fù)制vant 提供的路徑就OK了？
這樣更省時(shí)間，更省事。
再多提一嘴，vant組件是配合原生小程序使用的，所有有些地方，比如data數(shù)據(jù)渲染，我們不能直接照抄，一般用vue的思路就可以解決啦。
到此這篇關(guān)于在uni-app中使用vant組件的方法的文章就介紹到這了,更多相關(guān)uni-app使用vant組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- uni-app封裝組件實(shí)現(xiàn)下方滑動(dòng)彈出模態(tài)框效果
- uni-app自定義組件和通信的方式
- uni-app項(xiàng)目中引入Vant?UI組件庫完美避坑指南（純凈版）
- Uni-App用uView組件庫中u-picker實(shí)現(xiàn)地區(qū)的省-市-區(qū)三級(jí)聯(lián)動(dòng)、確認(rèn)及回顯
- uni-app中Navigator組件的用法詳解及傳參方式
- uni-app使用組件的步驟記錄
- uni-app自定義組件components導(dǎo)入失敗或頁面不顯示文本等解決方法
- uni-app無限級(jí)樹形組件簡單實(shí)現(xiàn)代碼
相關(guān)文章
vue中父子組件注意事項(xiàng),傳值及slot應(yīng)用技巧
這篇文章主要介紹了vue中父子組件注意事項(xiàng),傳值及slot應(yīng)用技巧,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
watchEffect，它立即執(zhí)行傳入的一個(gè)函數(shù)，同時(shí)響應(yīng)式追蹤其依賴，并在其依賴變更時(shí)重新運(yùn)行該函數(shù)，本文主要介紹了Vue3中watchEffect的具體用法，感興趣的可以了解一下2022-05-05
vue實(shí)現(xiàn)數(shù)字動(dòng)態(tài)翻牌的效果（開箱即用）
這篇文章主要介紹了vue實(shí)現(xiàn)數(shù)字動(dòng)態(tài)翻牌的效果（開箱即用）,實(shí)現(xiàn)原理是激將1到9的數(shù)字豎直排版，通過translate移動(dòng)位置顯示不同數(shù)字，本文通過實(shí)例代碼講解，需要的朋友可以參考下2019-12-12
解決基于 keep-alive 的后臺(tái)多級(jí)路由緩存問題
這篇文章主要介紹了解決基于 keep-alive 的后臺(tái)多級(jí)路由緩存問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
這篇文章主要為大家詳細(xì)介紹了Vue+Echarts實(shí)現(xiàn)柱狀折線圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue2 router 動(dòng)態(tài)傳參,多個(gè)參數(shù)的實(shí)例
下面小編就為大家?guī)硪黄獀ue2 router 動(dòng)態(tài)傳參,多個(gè)參數(shù)的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
vue?element修改el-select控件長度style=“width:XXpx“不生效的解決
這篇文章主要介紹了vue?element修改el-select控件長度style=“width:XXpx“不生效的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
解決vue-cli 打包后自定義動(dòng)畫未執(zhí)行的問題
今天小編就為大家分享一篇解決vue-cli 打包后自定義動(dòng)畫未執(zhí)行的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Axios提供了簡單而強(qiáng)大的API來處理HTTP請求,而FormData提供了用于構(gòu)建表單數(shù)據(jù)的API,這篇文章主要介紹了Vue中如何使用Axios發(fā)送FormData請求,需要的朋友可以參考下2024-07-07
Vue2.0實(shí)現(xiàn)簡單分頁及跳轉(zhuǎn)效果
這篇文章主要為大家詳細(xì)介紹了Vue2.0實(shí)現(xiàn)簡單數(shù)據(jù)分頁，及頁數(shù)的跳轉(zhuǎn)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07