我們介紹了使用mpvue開(kāi)發(fā)小程序所需要的一些開(kāi)發(fā)環(huán)境的搭建荸哟，并創(chuàng)建了第一個(gè)mpvue小程序代碼骨架并將其運(yùn)行起來(lái)。在本文中瞬捕，我們來(lái)研究熟悉一下mpvue項(xiàng)目的主要目錄和文件結(jié)構(gòu)鞍历。
在Visual Studio Code里面打開(kāi)項(xiàng)目文件夾，我們可以看到類似如下的文件結(jié)構(gòu)：
firstapp
├── package.json
├── project.config.json
├── static
├── src
│ ├── components
│ ├── pages
│ ├── utils
│ ├── App.vue
│ └── main.js
├── config
│ ├── index.js
│ ├── dev.env.js
│ └── prod.env.js
└── build
1）package.json文件
package.json是項(xiàng)目的主配置文件肪虎，里面包含了mpvue項(xiàng)目的基本描述信息劣砍、項(xiàng)目所依賴的各種第三方庫(kù)以及版本信息、以及可執(zhí)行的腳本信息扇救。
我們看到該文件中的scripts部分配置了4個(gè)可執(zhí)行的命令：
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"lint": "eslint --ext .js,.vue src"
-
dev和start是兩個(gè)等價(jià)的命令刑枝，執(zhí)行其中之一都可以將項(xiàng)目以開(kāi)發(fā)模式啟動(dòng)。執(zhí)行方式是：
npm start
npm run dev
-
lint指令是使用ESLint來(lái)進(jìn)行代碼語(yǔ)法和格式檢查迅腔，以及修復(fù)一些可自動(dòng)修復(fù)的問(wèn)題装畅。執(zhí)行方式是：
npm run lint #檢查語(yǔ)法和格式
npm run lint -- --fix #檢查代碼語(yǔ)法和格式，并修復(fù)可自動(dòng)修復(fù)的問(wèn)題
-
build指令是用于生成發(fā)布用代碼的沧烈，它會(huì)對(duì)代碼進(jìn)行一些壓縮優(yōu)化處理掠兄。當(dāng)小程序開(kāi)發(fā)完成后，將要提交審核時(shí)，請(qǐng)使用build來(lái)生成發(fā)布的代碼徽千。
2）project.config.json文件
project.config.json文件是用于管理微信開(kāi)發(fā)者工具的小程序項(xiàng)目的配置文件苫费，其中記錄了小程序的appid汤锨、代碼主目錄双抽、以及編譯選項(xiàng)等等信息，在微信開(kāi)發(fā)者工具中導(dǎo)入小程序項(xiàng)目的時(shí)候主要是通過(guò)該配置文件讀取和寫(xiě)入配置信息闲礼。
3）static目錄
static目錄可以用于存放各種小程序本地靜態(tài)資源牍汹，如圖片、文本文件等柬泽。代碼中可通過(guò)相對(duì)路徑或絕對(duì)路徑進(jìn)行訪問(wèn)慎菲， 如：
<img src="/static/button.png" />
<img src="../../../static/button.png" />
4）build目錄
build目錄下是一些用于項(xiàng)目編譯打包的node.js腳本和webpack配置文件。一般情況下不需要修改這些文件锨并。
5）config目錄
config目錄下包含了用于開(kāi)發(fā)和生產(chǎn)環(huán)境下的不同配置露该，dev.env.js用于開(kāi)發(fā)環(huán)境，prod.env.js用于生產(chǎn)環(huán)境第煮，你可以將開(kāi)發(fā)階段和生產(chǎn)階段不一樣的信息（如后臺(tái)API的url地址等）配置到這兩個(gè)文件中去解幼，然后在代碼中以變量的形式進(jìn)行引用。例如包警，這2個(gè)文件中分別配置了不同的API_BASE_URL值：
// dev.env.js
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_BASE_URL: '"http://127.0.0.1:8080/api"'
})
// prod.env.js
module.exports = {
NODE_ENV: '"production"',
API_BASE_URL: '"https://www.my-domain.com/api"'
}
那你在編寫(xiě)請(qǐng)求后端API的代碼時(shí)撵摆，你就可以使用這個(gè)環(huán)境配置，像這樣：
const baseURL = process.env.API_BASE_URL
wx.request({
url: `${baseURL}/products`
})
這樣一來(lái)害晦，開(kāi)發(fā)階段和上線發(fā)布階段的環(huán)境可以清楚的區(qū)分開(kāi)來(lái)特铝。
5）src目錄
src目錄是我們主要進(jìn)行小程序功能編寫(xiě)的地方。默認(rèn)生成的demo代碼為我們創(chuàng)建了幾個(gè)子目錄：components壹瘟、pages和utils鲫剿，還有2個(gè)文件：App.vue和main.js。其實(shí)它們都不是必須的稻轨，可以按照自己的風(fēng)格進(jìn)行定義和配置灵莲。不過(guò)默認(rèn)創(chuàng)建的這個(gè)結(jié)構(gòu)基本上是一個(gè)約定俗成的結(jié)構(gòu)了，比較易于理解澄者，所以我們可以遵循這個(gè)結(jié)構(gòu)進(jìn)行開(kāi)發(fā)笆呆。
components：在實(shí)際開(kāi)發(fā)中，我們可以盡量將界面上可復(fù)用的部分粱挡，提取成vue組件放入該目錄
pages：存放小程序的頁(yè)面赠幕。請(qǐng)遵循每個(gè)小程序頁(yè)面放入一個(gè)單獨(dú)子目錄的組織形式
utils：可選（可刪）⊙ぃ可以將代碼中一些公用工具函數(shù)組織成模塊放入該目錄下
可新建其他目錄榕堰，存放你希望組織起來(lái)的代碼。比如公用的業(yè)務(wù)邏輯代碼、請(qǐng)求后臺(tái)API的代碼等等
main.js + App.vue：這兩個(gè)是入口文件逆屡，相當(dāng)于原生小程序框架中的
app.json和app.js的復(fù)合體圾旨。
小結(jié)
本文主要介紹了mpvue工程的代碼結(jié)構(gòu)，大家可以多熟悉一下它們魏蔗，以方便后續(xù)的實(shí)際開(kāi)發(fā)工作砍的。
作者：一斤代碼
鏈接：http://www.reibang.com/p/2e98cc166dbd
來(lái)源：簡(jiǎn)書(shū)
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)莺治，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處廓鞠。
