使用mpvue開發小程式教程(二)

2021-09-13 09:01:47 字數 1693 閱讀 1289

在visual studio code裡面開啟專案資料夾,我們可以看到類似如下的檔案結構:

├── package.json

├── project.config.json

├── static

├── src

│ ├── components

│ ├── pages

│ ├── utils

│ └── 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"

npm start

npm run dev

npm run lint  #檢查語法和格式

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

2)project.config.json檔案

3)static目錄

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, )

// prod.env.js

module.exports =

那你在編寫請求後端api的**時,你就可以使用這個環境配置,像這樣:

const baseurl = process.env.api_base_url

wx.request(/products`

})

這樣一來,開發階段和上線發布階段的環境可以清楚的區分開來。

5)src目錄

小結

使用mpvue開發小程式教程(二)

在visual studio code裡面開啟專案資料夾,我們可以看到類似如下的檔案結構 package.json project.config.json static src components pages utils main.js config index.js dev.env.js pro...

使用mpvue開發小程式教程(三)

為了清楚起見,我們將要對vue cli生成的 做乙個清理工作,具體如下 import vue from vue vue.config.productiontip false export default 至此,我們的 就成了乙個小程式頁面都沒有的初始狀態。程式入口 有了這三個部分,才能成功執行起乙個...

使用mpvue開發小程式教程(五)

在上一章節中,我們了解了元件的三個基本特性以及元件的基本使用方法。在實際的小程式開發中,我們應該以元件的思維去設計每個小程式的功能頁面,對其進行合理的元件拆分,讓每個部分都保持功能簡潔 條理清楚 各司其職,這樣會讓 變得更易理解和維護,間接的也提公升了 的健壯性,降低出現bug的機率,即使出現bug...