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