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