小程序vant-weapp框架的引入

爲大家介紹一下小程序的ui框架基於有贊開發一個框架,關於它的安裝和使用接下來都會介紹到。
先介紹一下人家的官網vant-weapp
注意的是小程序的是vant-weapp,有讚的還有一個移動端ui框架vant-app。
有兩種安裝方法,下面來一個一個介紹:
第一種方法:使用npm的方式去安裝
1.npm i vant-weapp -S --production
在這裏插入圖片描述
在這裏插入圖片描述
運行完後有個node_modules,這代表你的第一步成功了。
2.在項目上一定要勾選上使用npm模塊在這裏插入圖片描述
3.在微信小程序的ide上找到工具->構建npm
在這裏插入圖片描述
在這裏插入圖片描述
然後就會構建npm,然後你會發現項目中會多了一個miniprogram_npm

在這裏插入圖片描述
如果這個是後你的頁面報錯了,你的控制檯也爆紅了,不要慌,你只需要再次構建一下npm就可以了,再次構建完後,然後就可以引用它的組件了。這是npm安裝的方式。
第二種方法就比較直接簡單粗暴了:
vant-weapp Github地址找到它的項目地址直接下載下來,然後將它的dist目錄複製到你的項目中,就可以引用它的組件了。
再來介紹一下它的引入方式:
它可以單頁面引入也可以全局引入這個組件,現在只針對它的單頁面引入做示例:
在這裏插入圖片描述

在這裏插入圖片描述
這個組件的名字是可以自己改的如:van-button你可以改成my-button
在這裏插入圖片描述
然後在當前的頁面直接用就行了,那有時候我們需要自己設置樣式我們可以直接custom-class直接修改去改我們想要的樣式。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章