mpvue是美團(tuán)開(kāi)源框架，使開(kāi)發(fā)者可以像開(kāi)發(fā)vue項(xiàng)目一樣開(kāi)發(fā)小程序，然而由于mpvue是對(duì)微信原生開(kāi)發(fā)的再次封裝（有些不同于vue地方畢竟不是spa嘛），這也為我們引入U(xiǎn)I組件添加了不少麻煩，話不多說(shuō)，接下來(lái)為大家展示引入vant-weapp的方法。
1、首先，我們需要初始化個(gè)mpvue項(xiàng)目
# 全局安裝 vue-cli
$ npm install –global vue-cli
# 創(chuàng)建一個(gè)基于 mpvue-quickstart 模板的新項(xiàng)目
$ vue init mpvue/mpvue-quickstart my-project
# 安裝依賴
$ cd my-project
$ npm install
# 啟動(dòng)構(gòu)建
$ npm run dev
啟動(dòng)成功后會(huì)生成一個(gè)dist文件里面有個(gè)\”wx\”項(xiàng)目就是編譯好的微信小程序項(xiàng)目
2,在微信開(kāi)發(fā)者工具中新建項(xiàng)目,填入注冊(cè)的appid和文件目錄（敲黑板了這里要注意一點(diǎn)，文件目錄就是dist里的wx）
3，接下來(lái)就是接入 vant-weapp ui庫(kù)
git clone https://github.com/youzan/vant-weapp.git
先把vant-weapp下載下來(lái),下來(lái)后將其項(xiàng)目下的dist文件全部都copy到我們需要用到原項(xiàng)目中，為了方便管理，可以在根目錄下的static下新建一個(gè)vant用于存放UI組件文件；
4，之后的就比較簡(jiǎn)單了，組件的具體用法可在官方文檔中查看（https://youzan.github.io/vant-weapp/#），我們只需要在我們需要使用組件的頁(yè)面的配置json文件中引入我們需要的組件就可以了
好了！保存之后就可以直接在在微信開(kāi)發(fā)者工具中看到效果了。謝謝各位賞光如果覺(jué)得有用點(diǎn)個(gè)收藏！
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。