使用mpvue開發小程序教程（二）

在上一篇文章中，咱們介紹了使用mpvue開發小程序所須要的一些開發環境的搭建，並建立了第一個mpvue小程序代碼骨架並將其運行起來。在本文中，咱們來研究熟悉一下mpvue項目的主要目錄和文件結構。

在Visual Studio Code裏面打開項目文件夾，咱們能夠看到相似以下的文件結構：

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是項目的主配置文件，裏面包含了mpvue項目的基本描述信息、項目所依賴的各類第三方庫以及版本信息、以及可執行的腳本信息。

咱們看到該文件中的scripts部分配置了4個可執行的命令：

"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是兩個等價的命令，執行其中之一均可以將項目以開發模式啓動。執行方式是：

npm start
npm run dev

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

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

• build指令是用於生成發佈用代碼的，它會對代碼進行一些壓縮優化處理。當小程序開發完成後，將要提交審覈時，請使用build來生成發佈的代碼。

2）project.config.json文件

project.config.json文件是用於管理微信開發者工具的小程序項目的配置文件，其中記錄了小程序的appid、代碼主目錄、以及編譯選項等等信息，在微信開發者工具中導入小程序項目的時候主要是經過該配置文件讀取和寫入配置信息。

3）static目錄

static目錄能夠用於存放各類小程序本地靜態資源，如圖片、文本文件等。代碼中可經過相對路徑或絕對路徑進行訪問， 如：

<img src="/static/button.png" />
<img src="../../../static/button.png" />

4）build目錄

build目錄下是一些用於項目編譯打包的node.js腳本和webpack配置文件。通常狀況下不須要修改這些文件。

5）config目錄

config目錄下包含了用於開發和生產環境下的不一樣配置，dev.env.js用於開發環境，prod.env.js用於生產環境，你能夠將開發階段和生產階段不同的信息（如後臺API的url地址等）配置到這兩個文件中去，而後在代碼中以變量的形式進行引用。例如，這2個文件中分別配置了不一樣的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"'
}

那你在編寫請求後端API的代碼時，你就能夠使用這個環境配置，像這樣：

const baseURL = process.env.API_BASE_URL
wx.request({
  url: `${baseURL}/products`
})

這樣一來，開發階段和上線發佈階段的環境能夠清楚的區分開來。

5）src目錄

src目錄是咱們主要進行小程序功能編寫的地方。默認生成的demo代碼爲咱們建立了幾個子目錄：components、pages和utils，還有2個文件：App.vue和main.js。其實它們都不是必須的，能夠按照本身的風格進行定義和配置。不過默認建立的這個結構基本上是一個約定俗成的結構了，比較易於理解，因此咱們能夠遵循這個結構進行開發。

• components：在實際開發中，咱們能夠儘可能將界面上可複用的部分，提取成vue組件放入該目錄

• pages：存放小程序的頁面。請遵循每一個小程序頁面放入一個單獨子目錄的組織形式

• utils：可選（可刪）。能夠將代碼中一些公用工具函數組織成模塊放入該目錄下

• 可新建其餘目錄，存放你但願組織起來的代碼。好比公用的業務邏輯代碼、請求後臺API的代碼等等

• main.js + App.vue：這兩個是入口文件，至關於原生小程序框架中的app.json和app.js的複合體。

小結

本文主要介紹了mpvue工程的代碼結構，你們能夠多熟悉一下它們，以方便後續的實際開發工做。

還想繼續閱讀？那就讀下一篇吧！

做者：一斤代碼 連接：https://www.jianshu.com/p/2e98cc166dbd 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。