上一篇介紹mpvue開發(fā)小程序所需要的開發(fā)環(huán)境和工具，并創(chuàng)建了一個(gè)初始化項(xiàng)目。這一篇主要是了解一下mpvue的目錄結(jié)構(gòu)和一些基本的開發(fā)配置。
mpuve項(xiàng)目目錄結(jié)構(gòu)
在visual studio code里面打開我們創(chuàng)建的項(xiàng)目文件夾mini-blog，目錄結(jié)構(gòu)大致如下：
1.package.json文件：
是項(xiàng)目的主配置文件，里面包含了mpvue項(xiàng)目的基本描述信息、項(xiàng)目所依賴的各種第三方庫(kù)以及版本信息、以及可執(zhí)行的腳本信息。
2.project.config.json文件：
是用于管理微信開發(fā)者工具的小程序項(xiàng)目的配置文件，其中記錄了小程序的appid、代碼主目錄、以及編譯選項(xiàng)等等信息，在微信開發(fā)者工具中導(dǎo)入小程序項(xiàng)目的時(shí)候主要是通過該配置文件讀取和寫入配置信息。
3.static目錄：
是可以用于存放各種小程序本地靜態(tài)資源，如圖片、文本文件等。代碼中可通過相對(duì)路徑或絕對(duì)路徑進(jìn)行訪問。
4.build目錄：
是一些用于項(xiàng)目編譯打包的node.js腳本和webpack配置文件。
5.config目錄：
該目錄下包含了用于開發(fā)和生產(chǎn)環(huán)境下的不同配置。
6.src目錄：
是進(jìn)行小程序功能編寫的地方，demo代碼默認(rèn)創(chuàng)建了幾個(gè)子目錄：components、pages、utils、App.vue、main.js。其實(shí)它們都不是必須的，可以按照自己的風(fēng)格進(jìn)行定義和配置。不過默認(rèn)創(chuàng)建的這個(gè)結(jié)構(gòu)基本上是一個(gè)約定俗成的結(jié)構(gòu)，比較容易理解，所以最好是遵循這個(gè)結(jié)構(gòu)進(jìn)行開發(fā)。
components：可以將界面上復(fù)用較多部分提取成公共組件，放入該目錄下。
pages：小程序頁面存放目錄，最好是遵循每個(gè)小程序頁面放入一個(gè)單獨(dú)子目錄的組織形式。
utils：可以將代碼中一些公用工具函數(shù)組織成模塊放入該目錄下
main.js、App.vue：這兩個(gè)是入口文件，相當(dāng)于原生小程序框架中的app.json和app.js的復(fù)合體。
開發(fā)配置
1.簡(jiǎn)單清理工作：
正式編碼之前，需要對(duì)這個(gè)初始化工程代碼做點(diǎn)清理工作。首先，刪除pages目錄下的counter、logs目錄，僅保留index目錄，并且index目錄下的index.vue文件重置為：
接下來重新編譯，有的同學(xué)編譯可能會(huì)報(bào)錯(cuò)不成功，這是因?yàn)閙pvue默認(rèn)開啟了eslint嚴(yán)格語法校檢，如果對(duì)自己要求高可以按照eslint規(guī)范進(jìn)行編碼。我比較煩它的是寫點(diǎn)代碼就會(huì)標(biāo)紅然后編譯失敗，所以就關(guān)閉了vue頁面內(nèi)部的eslint代碼檢查，具體做法是找到build目錄下的webpack.base.conf.js文件，將這條eslint校檢規(guī)則注釋掉就可以了。
重新編譯成功后，在微信小程序中預(yù)覽效果如下：
2.mpvue引入樣式預(yù)編譯工具less：
樣式預(yù)編譯工具，我個(gè)人使用less較多，所以這個(gè)項(xiàng)目依舊采用的是less工具。
原生小程序使用樣式預(yù)編譯需要在編譯器進(jìn)行一系列繁瑣的配置，而在mpvue中使用樣式預(yù)編譯將會(huì)簡(jiǎn)單很多。
之前的mpvue1.0版本使用less還需要我們手動(dòng)安裝less-loader，然后在配置文件webpack.base.conf.js中引入使用。而mpvue2.0.0已經(jīng)配置好一系列樣式預(yù)編譯工具包括less、sass、stylus。你所需要做的就是在style標(biāo)簽上添加?lang="less" 屬性即可。
2.引入U(xiǎn)I組件庫(kù)vant WeApp：
選擇一款好用的UI組件庫(kù)可以讓你的開發(fā)達(dá)到事半功倍的效果。小程序的UI組件庫(kù)有很多，目前在開源社區(qū)排名較高的以下幾款：WeUI WXSS、iView WeApp、vant?WeApp、MinUI、Wux WeApp、ColorUI，這些組件庫(kù)有各自的風(fēng)格和特點(diǎn)，你可以搜索它們的網(wǎng)站并查閱文檔先大致了解一下，然后根據(jù)項(xiàng)目的需求選擇一款契合自己的。
我的博客項(xiàng)目比較簡(jiǎn)單而且通用組件復(fù)雜性要求不高，這里我選擇的是的vant?WeApp，有贊團(tuán)隊(duì)開發(fā)，現(xiàn)已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、tab、toast、tooltips 等組件或元素。
GitHub地址：
https://github.com/youzan/vant-weapp
vant?WeApp暫時(shí)好像還不支持npm安裝，我這里的做法是將組件下載到本地，并將dist目錄包改名為vant-weapp置入項(xiàng)目的static目錄下，然后在本地引用。
使用組件的方法也很簡(jiǎn)單，這里我示例一下如何在項(xiàng)目中使用vant的按鈕組件。
index目錄下新建文件main.json并申明引入如下：
在index.vue頁面文件內(nèi)就可以直接使用按鈕組件了：
預(yù)覽效果如下：
至此，我們項(xiàng)目的前端開發(fā)配置接近完成，接下來將會(huì)介紹云開發(fā)云函數(shù)的初始化和數(shù)據(jù)庫(kù)的配置。
