最近在玩mpvue開發(fā)微信小程序涩笤，在技術(shù)選型的時候糾結(jié)了一下昆淡，目前好像比較流行的就是原生锰瘸、Wepy、mpvue這三種了昂灵，考慮到mpvue接近Vue一些避凝，所以選了mpvue作為技術(shù)框架。
寫在前面的話
小程序是我很早之前申請的了眨补，所以申請的具體過程不太記得了管削，當(dāng)時申請的是個人的小程序。那個時候還寫了一個原生的撑螺，比較簡陋也是看著視頻學(xué)習(xí)寫的含思。關(guān)于小程序的申請推薦大家看看其他人的。
開始mpvue
mpvue的官網(wǎng)有個五分鐘快速上手的教程甘晤，照著那上面實踐含潘，基本上一個大致的框架就會出來了。此處是mpvue的傳送門线婚。
大致的命令貼一下：
1 # 全局安裝 vue-cli
$ npm install --global vue-cli
2 # 創(chuàng)建一個基于 mpvue-quickstart 模板的新項目
$ vue init mpvue/mpvue-quickstart xxxxx(xxxxx為項目名稱)
3 # 安裝依賴
$ cd xxxxx(xxxxx為項目名稱)
$ npm install
4 # 啟動構(gòu)建
$ npm run dev
PS：安裝過程中可能會有一些配置遏弱，基本上按照提示語來選擇配置就沒事了，和當(dāng)初vue-cli的差不多塞弊。
然后打開微信開發(fā)者工具漱逸，目錄為剛才那個項目構(gòu)建生產(chǎn)的dist目錄。
這個時候游沿，微信開發(fā)者工具會出現(xiàn)這樣的畫面饰抒。
關(guān)于第三方ui庫的引入
搜了下目前比較出名的三套UI。
WeUI: 一套同微信原生視覺體驗一致的基礎(chǔ)樣式庫奏候，由微信官方設(shè)計團(tuán)隊為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計循集，令用戶的使用感知更加統(tǒng)一。(github)
Vant-UI: 有贊移動 Web UI 規(guī)范 ZanUI 的小程序現(xiàn)實版本蔗草。以前叫ZanUI咒彤，現(xiàn)在改名為Vant-UI(github)
iView Weapp: 與iView（基于 Vue.js 的開源 UI 組件庫）同一組織產(chǎn)出的微信小程序UI組件庫疆柔。(github)
然后我比較了一下，我選的是WeUI镶柱，貼一下引用的過程旷档。因為自己在這一塊走了挺多的彎路的。
1.先去git將WeUI項目下載下來歇拆。
2.然后將weui-wxss-master\dist\style下的weui.wxss復(fù)制到mpvue項目的/static/目錄下鞋屈。
3.去mpvue項目的main.js(緊貼著App.vue的那個)全局引入
import '../static/weui.wxss'。
4.引入插件的模板可見weui-wxss-master\dist\example故觅。
比如說我引入了一個button厂庇。
模板結(jié)構(gòu)是這樣的：
本來還封裝了flyio权旷，但是還沒看到封裝效果，沒法驗證自己是不是封裝正確了贯溅，所以打算后面正式接入接口的時候試一下拄氯，如果正確就把封裝的過程和代碼貼出來。
