快捷導(dǎo)航

在uni-app中使用vant組件的方法

更新時(shí)間：2023年02月18日 11:51:53 作者：依然在學(xué)前端

最近在做uni-app的時(shí)候需要用到vant組件，在網(wǎng)上看到了很多的使用vant組件的方法，但是講解的大多繁瑣，或者無(wú)法使用，現(xiàn)把最新，最實(shí)用的vant組件的使用方法分享給大家,需要的朋友可以參考下

前言：

最近在做uni-app的時(shí)候需要用到vant組件，在網(wǎng)上看到了很多的使用vant組件的方法，但是講解的大多繁瑣，或者無(wú)法使用，現(xiàn)把最新，最實(shí)用的vant組件的使用方法分享給大家。

步驟一：

打開(kāi) Hbulider x ，然后新建項(xiàng)目；

步驟二：

填寫項(xiàng)目名稱，選擇模板，vue技術(shù)棧，...詳細(xì)如圖，然后點(diǎn)擊創(chuàng)建即可

步驟三：

在與pages 同級(jí)目錄先創(chuàng)建一個(gè) 名稱為： wxcomponents 的文件夾，不會(huì)操作的話看圖。

步驟四：

在我們剛才新建的wxcomponents 目錄下新建一個(gè) @vant 的文件夾，建立目錄方法就和步驟三一樣，只不過(guò)這一次我們要在 wxcomponents 目錄下建立子目錄 @vant

步驟五：

瀏覽器打開(kāi) 這個(gè)鏈接：

vant-weapp GitHub官方文檔https://github.com/youzan/vant-weapp/releases 下載如圖所示的壓縮包

? 步驟六：

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

步驟七：

在全局的page.json進(jìn)行全局注冊(cè)，使它變成全局可用！如圖所示：

寫在最后：

為什么我們要改文件夾名字，因?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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue+ElementUI?封裝簡(jiǎn)易PaginationSelect組件的詳細(xì)步驟
這篇文章主要介紹了Vue+ElementUI?封裝簡(jiǎn)易PaginationSelect組件,這里簡(jiǎn)單介紹封裝的一個(gè)Pagination-Select組件幾個(gè)步驟，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-08-08
基于 Vue.js 2.0 酷炫自適應(yīng)背景視頻登錄頁(yè)面實(shí)現(xiàn)方式
本文講述如何實(shí)現(xiàn)擁有酷炫背景視頻的登錄頁(yè)面，瀏覽器窗口隨意拉伸，背景視頻及前景登錄組件均能完美適配，背景視頻可始終鋪滿窗口，前景組件始終居中，視頻的內(nèi)容始終得到最大限度的保留，可以得到最好的視覺(jué)效果
2018-01-01
Webpack和Vite的區(qū)別小結(jié)
本文主要介紹了Webpack和Vite的區(qū)別小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
Vue 中對(duì)圖片地址進(jìn)行拼接的方法
今天小編就為大家分享一篇Vue 中對(duì)圖片地址進(jìn)行拼接的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue通過(guò)krpano.js實(shí)現(xiàn)360全景圖的實(shí)例代碼
這篇文章主要介紹了vue上通過(guò)krpano.js實(shí)現(xiàn)360全景圖,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-10-10
Vue.js雙向綁定實(shí)現(xiàn)原理詳解
這篇文章主要為大家詳細(xì)介紹了Vue.js雙向綁定實(shí)現(xiàn)原理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
詳解vue.js+UEditor集成 [前后端分離項(xiàng)目]
本篇文章主要介紹了詳解vue.js+UEditor集成 [前后端分離項(xiàng)目] ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
淺談vue.use()方法從源碼到使用
這篇文章主要介紹了淺談vue.use()方法從源碼到使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
Vue學(xué)習(xí)之Vuex的使用詳解
這篇文章主要介紹了Vue中的插件：Vuex。本文將圍繞它的優(yōu)缺點(diǎn)、使用場(chǎng)景和示例展開(kāi)詳細(xì)的說(shuō)明，感興趣的小伙伴可以跟隨小編一起了解一下
2022-01-01
Vue中傳遞自定義參數(shù)到后端、后端獲取數(shù)據(jù)并使用Map接收參數(shù)
有些傳遞的參數(shù)是直接拼接到URL地址欄中的、但是為了統(tǒng)一管理、不能將傳遞的參數(shù)直接拼接到地址欄中，接下來(lái)通過(guò)本文給大家介紹Vue中傳遞自定義參數(shù)到后端、后端獲取數(shù)據(jù)并使用Map接收參數(shù)，感興趣的朋友一起看看吧
2022-10-10