使用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 來源：简书 简书著做权归做者全部，任何形式的转载都请联系做者得到受权并注明出处。