vant開發(fā)微信小程序安裝以及簡(jiǎn)單使用教程
更新時(shí)間：2022年12月24日 14:09:33 作者：Nanchen_42
這篇文章主要介紹了vant開發(fā)微信小程序安裝以及簡(jiǎn)單使用教程,需要的朋友可以參考下
準(zhǔn)備工作
首先準(zhǔn)備一個(gè)空文件夾，新建微信小程序，把文件夾路徑引入，刪除index.wxml,index.wxss以及index.js中的文件內(nèi)容
刪除完畢后重新初始化index.js，在頁(yè)面中輸入page
對(duì)外圍的文件夾進(jìn)行初始化
接下來就是在文件夾下的目錄中調(diào)出控制臺(tái)輸入以下命令
npm init -y
第一步：使用以下命令進(jìn)行配置
npm i @vant/weapp -S --production?
安裝完成后出現(xiàn)一個(gè)node_modules文件夾就算成功了
第二步 ：刪除app.json中的"style":"v2"
第三步：在詳情中基本配置中勾選npm模塊
第四步：點(diǎn)擊工具——>構(gòu)建npm
構(gòu)建成功即可
到此為止項(xiàng)目就已經(jīng)安裝完畢了
接下來就是如何用vant
比如這里用按鈕控件就必須先引入按鈕的配置
app.json是全局的，index.json只對(duì)當(dāng)前文件有用
效果顯示如下：
比如還想引入單元格樣式
以上就是vant開發(fā)微信小程序安裝以及簡(jiǎn)單使用教程的詳細(xì)內(nèi)容，更多關(guān)于vant開發(fā)微信小程序的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue實(shí)現(xiàn)active點(diǎn)擊切換方法
下面小編就為大家分享一篇Vue實(shí)現(xiàn)active點(diǎn)擊切換方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了關(guān)于el-tooltip使用\n換行的情況顯示,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
vue實(shí)現(xiàn)將一維數(shù)組變換為三維數(shù)組
這篇文章主要為大家詳細(xì)介紹了vue如何實(shí)現(xiàn)將一維數(shù)組變換為三維數(shù)組,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
vue?實(shí)現(xiàn)列表跳轉(zhuǎn)至詳情且能添加至購(gòu)物車功能
列表頁(yè)面顯示數(shù)據(jù)，點(diǎn)擊跳轉(zhuǎn)到對(duì)應(yīng)的詳情頁(yè)，詳情頁(yè)可以添加并跳轉(zhuǎn)到購(gòu)物車，購(gòu)物車具有常見功能，這篇文章主要介紹了vue?實(shí)現(xiàn)列表跳轉(zhuǎn)至詳情且能添加至購(gòu)物車,需要的朋友可以參考下2022-10-10
vue實(shí)現(xiàn)跳轉(zhuǎn)接口push 轉(zhuǎn)場(chǎng)動(dòng)畫示例
今天小編就為大家分享一篇vue實(shí)現(xiàn)跳轉(zhuǎn)接口push 轉(zhuǎn)場(chǎng)動(dòng)畫示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue-cli設(shè)置css不生效的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
在前端開發(fā)中，如果需要模擬后端數(shù)據(jù)，而又不想開發(fā)一個(gè)后端服務(wù)器， 則可以借助mock.js配置一個(gè)后端服務(wù)器來返回前端需要的數(shù)據(jù)，本文將會(huì)分別介紹在Quasar項(xiàng)目和Vite項(xiàng)目中Mock服務(wù)器的配置方法2022-12-12
vue+element加入簽名效果（移動(dòng)端可用）
這篇文章主要介紹了vue+element加入簽名效果（移動(dòng)端），本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
vue3封裝Element導(dǎo)航菜單的實(shí)例代碼
這篇文章主要介紹了vue3封裝Element導(dǎo)航菜單的實(shí)例代碼,分為菜單數(shù)據(jù)格式示例,控制導(dǎo)航收縮的詳細(xì)代碼,本文通過實(shí)例代碼介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章主要給大家介紹了關(guān)于vue3前端獲取文件的絕對(duì)路徑問題解決的相關(guān)資料,文中通過代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09