欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2023年02月18日 11:51:53   作者:依然在學(xué)前端  
最近在做uni-app的時候需要用到vant組件,在網(wǎng)上看到了很多的使用vant組件的方法,但是講解的大多繁瑣,或者無法使用,現(xiàn)把最新,最實(shí)用的vant組件的使用方法分享給大家,需要的朋友可以參考下

前言:

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

步驟一:

打開 Hbulider x ,然后新建項(xiàng)目;

 步驟二:

填寫項(xiàng)目名稱,選擇模板,vue技術(shù)棧,...詳細(xì)如圖,然后點(diǎn)擊創(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進(jìn)行全局注冊,使它變成全局可用!如圖所示:

 寫在最后:

為什么我們要改文件夾名字,因?yàn)槲覀兛吹剑瑅ant組件內(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+ElementUI?封裝簡易PaginationSelect組件的詳細(xì)步驟

    Vue+ElementUI?封裝簡易PaginationSelect組件的詳細(xì)步驟

    這篇文章主要介紹了Vue+ElementUI?封裝簡易PaginationSelect組件,這里簡單介紹封裝的一個Pagination-Select組件幾個步驟,結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2022-08-08
  • 基于 Vue.js 2.0 酷炫自適應(yīng)背景視頻登錄頁面實(shí)現(xiàn)方式

    基于 Vue.js 2.0 酷炫自適應(yīng)背景視頻登錄頁面實(shí)現(xiàn)方式

    本文講述如何實(shí)現(xiàn)擁有酷炫背景視頻的登錄頁面,瀏覽器窗口隨意拉伸,背景視頻及前景登錄組件均能完美適配,背景視頻可始終鋪滿窗口,前景組件始終居中,視頻的內(nèi)容始終得到最大限度的保留,可以得到最好的視覺效果
    2018-01-01
  • Webpack和Vite的區(qū)別小結(jié)

    Webpack和Vite的區(qū)別小結(jié)

    本文主要介紹了Webpack和Vite的區(qū)別小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • Vue 中對圖片地址進(jìn)行拼接的方法

    Vue 中對圖片地址進(jìn)行拼接的方法

    今天小編就為大家分享一篇Vue 中對圖片地址進(jìn)行拼接的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue通過krpano.js實(shí)現(xiàn)360全景圖的實(shí)例代碼

    vue通過krpano.js實(shí)現(xiàn)360全景圖的實(shí)例代碼

    這篇文章主要介紹了vue上通過krpano.js實(shí)現(xiàn)360全景圖,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-10-10
  • Vue.js雙向綁定實(shí)現(xiàn)原理詳解

    Vue.js雙向綁定實(shí)現(xiàn)原理詳解

    這篇文章主要為大家詳細(xì)介紹了Vue.js雙向綁定實(shí)現(xiàn)原理,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • 詳解vue.js+UEditor集成 [前后端分離項(xiàng)目]

    詳解vue.js+UEditor集成 [前后端分離項(xiàng)目]

    本篇文章主要介紹了詳解vue.js+UEditor集成 [前后端分離項(xiàng)目] ,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • 淺談vue.use()方法從源碼到使用

    淺談vue.use()方法從源碼到使用

    這篇文章主要介紹了淺談vue.use()方法從源碼到使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • Vue學(xué)習(xí)之Vuex的使用詳解

    Vue學(xué)習(xí)之Vuex的使用詳解

    這篇文章主要介紹了Vue中的插件:Vuex。本文將圍繞它的優(yōu)缺點(diǎn)、使用場景和示例展開詳細(xì)的說明,感興趣的小伙伴可以跟隨小編一起了解一下
    2022-01-01
  • Vue中傳遞自定義參數(shù)到后端、后端獲取數(shù)據(jù)并使用Map接收參數(shù)

    Vue中傳遞自定義參數(shù)到后端、后端獲取數(shù)據(jù)并使用Map接收參數(shù)

    有些傳遞的參數(shù)是直接拼接到URL地址欄中的、但是為了統(tǒng)一管理、不能將傳遞的參數(shù)直接拼接到地址欄中,接下來通過本文給大家介紹Vue中傳遞自定義參數(shù)到后端、后端獲取數(shù)據(jù)并使用Map接收參數(shù),感興趣的朋友一起看看吧
    2022-10-10

最新評論