微信小程序引入Vant組件庫(kù)過(guò)程解析
前期準(zhǔn)備
Vant Weapp組件庫(kù): https://youzan.github.io/vant-weapp/#/intro
1.先在微信開發(fā)者工具中打開項(xiàng)目的終端:
然后初始化一個(gè)package.json文件:輸入命令:npm init
然后一路回車默認(rèn)的即可:
npm init
項(xiàng)目就回產(chǎn)生一個(gè)package.json文件:
{ "name": "miniprogram", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
2.接著在vant組件庫(kù)的官網(wǎng)上找到安裝語(yǔ)句:
npm i vant-weapp -S --production,在終端輸入安裝命令,點(diǎn)擊回車:
npm i vant-weapp -S --production
3.構(gòu)建npm:
在微信開發(fā)者工具的菜單欄中找到工具欄的選項(xiàng)“構(gòu)建npm”,等待構(gòu)建完成
4.引用和使用vant組件:
(關(guān)于如何引用和使用組件可以參考官方文檔噢,很齊全)
以引用button按鈕為例,官網(wǎng)文檔中都寫的特別詳細(xì)了:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
uniapp使用H5調(diào)試時(shí)跨域問(wèn)題解決
本文主要介紹了uniapp使用H5調(diào)試時(shí)跨域問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07JavaScript必知必會(huì)(九)function 說(shuō)起 閉包問(wèn)題
這篇文章主要介紹了JavaScript必知必會(huì)(九)function 說(shuō)起 閉包問(wèn)題的相關(guān)資料,需要的朋友可以參考下2016-06-06解決bootstrap下拉菜單點(diǎn)擊立即隱藏bug的方法
本篇文章主要介紹了解決bootstrap下拉菜單點(diǎn)擊立即隱藏bug的方法,具有一定的參考價(jià)值,有興趣的可以了解一下2017-06-06JavaScript下的時(shí)間格式處理函數(shù)Date.prototype.format
這篇文章主要介紹了JavaScript下的時(shí)間格式處理函數(shù)Date.prototype.format的相關(guān)資料,需要的朋友可以參考下2016-01-01js實(shí)現(xiàn)select二級(jí)聯(lián)動(dòng)下拉菜單
這個(gè)是簡(jiǎn)單也是最基本的下拉框聯(lián)動(dòng)的示例,這個(gè)示例主要針對(duì)那些只有二級(jí)聯(lián)動(dòng),且第一級(jí)是固定的選項(xiàng),第二級(jí)的內(nèi)容也比較簡(jiǎn)單,不刷新的聯(lián)動(dòng),感興趣的小伙伴們可以參考一下2016-04-04JavaScript實(shí)現(xiàn)點(diǎn)擊圖片換背景
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊圖片換背景,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11js驗(yàn)證真實(shí)姓名與身份證號(hào),手機(jī)號(hào)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js驗(yàn)證真實(shí)姓名與身份證號(hào),手機(jī)號(hào)的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07js實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡效果
本文主要介紹了js實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡效果的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02Javascript動(dòng)態(tài)綁定事件的簡(jiǎn)單實(shí)現(xiàn)代碼
Javascript事件綁定的方法很多,很靈活。不過(guò),作為比較簡(jiǎn)單的動(dòng)態(tài)綁定,下面的代碼看似正確,但得不到預(yù)期的效果。2010-12-12