2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

在Visual Studio Code里面打開項(xiàng)目文件夾，我們可以看到類似如下的文件結(jié)構(gòu)：

1、package.json文件

package.json是項(xiàng)目的主配置文件，里面包含了mpvue項(xiàng)目的基本描述信息、項(xiàng)目所依賴的各種第三方庫以及版本信息、以及可執(zhí)行的腳本信息。

我們看到該文件中的scripts部分配置了4個(gè)可執(zhí)行的命令：

"scripts": {"dev": "node build/dev-server.js wx","start": "npm run dev","build": "node build/build.js wx","lint": "eslint --ext .js,.vue src" },

• dev和start是兩個(gè)等價(jià)的命令，執(zhí)行其中之一都可以將項(xiàng)目以開發(fā)模式啟動。執(zhí)行方式是：

npm start npm run dev

• lint指令是使用ESLint來進(jìn)行代碼語法和格式檢查，以及修復(fù)一些可自動修復(fù)的問題。執(zhí)行方式是：

#檢查語法和格式 npm run lint #檢查代碼語法和格式，并修復(fù)可自動修復(fù)的問題 npm run lint -- --fix

• build指令是用于生成發(fā)布用代碼的，它會對代碼進(jìn)行一些壓縮優(yōu)化處理。當(dāng)小程序開發(fā)完成后，將要提交審核時(shí)，請使用build來生成發(fā)布的代碼。

npm run build

?2、project.config.json文件

project.config.json文件是用于管理微信開發(fā)者工具的小程序項(xiàng)目的配置文件，其中記錄了小程序的appid、代碼主目錄、以及編譯選項(xiàng)等等信息，在微信開發(fā)者工具中導(dǎo)入小程序項(xiàng)目的時(shí)候主要是通過該配置文件讀取和寫入配置信息。

3、static目錄

static目錄可以用于存放各種小程序本地靜態(tài)資源，如圖片、文本文件等。代碼中可通過相對路徑或絕對路徑進(jìn)行訪問， 如：

<image src="/static/img/icon.png" />

4、build目錄

build目錄下是一些用于項(xiàng)目編譯打包的node.js腳本和webpack配置文件。一般情況下不需要修改這些文件。

5、config目錄

config目錄下包含了用于開發(fā)和生產(chǎn)環(huán)境下的不同配置，dev.env.js用于開發(fā)環(huán)境，prod.env.js用于生產(chǎn)環(huán)境，你可以將開發(fā)階段和生產(chǎn)階段不一樣的信息（如后臺API的url地址等）配置到這兩個(gè)文件中去，然后在代碼中以變量的形式進(jìn)行引用。例如，這2個(gè)文件中分別配置了不同的API_BASE_URL值：

# dev.env.js module.exports = merge(prodEnv, {NODE_ENV: '"development"',API_BASE_URL: '"https://test.cn:8443"' }) # prod.env.js module.exports = {NODE_ENV: '"production"',API_BASE_URL: '"https://app.cn:8443"' }

那你在編寫請求后端API的代碼時(shí)，你就可以使用這個(gè)環(huán)境配置，像這樣：

const host = process.env.API_BASE_URL;

這樣一來，開發(fā)階段和上線發(fā)布階段的環(huán)境可以清楚的區(qū)分開來。

6、src目錄

src目錄是我們主要進(jìn)行小程序功能編寫的地方。默認(rèn)生成的demo代碼為我們創(chuàng)建了幾個(gè)子目錄：components、pages和utils，還有2個(gè)文件：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：在實(shí)際開發(fā)中，我們可以盡量將界面上可復(fù)用的部分，提取成vue組件放入該目錄。
• pages：存放小程序的頁面。請遵循每個(gè)小程序頁面放入一個(gè)單獨(dú)子目錄的組織形式。
• 可選（可刪）。可以將代碼中一些公用工具函數(shù)組織成模塊放入該目錄下。
• 可新建其他目錄，存放你希望組織起來的代碼。比如公用的業(yè)務(wù)邏輯代碼、請求后臺API的代碼等等。
• main.js + App.vue：這兩個(gè)是入口文件，相當(dāng)于原生小程序框架中的app.json和app.js的復(fù)合體。

參考

?https://www.jianshu.com/p/2e98cc166dbd

轉(zhuǎn)載于:https://my.oschina.net/lienson/blog/3015452

總結(jié)

以上是生活随笔為你收集整理的浅谈mpvue项目目录和文件结构的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。