使用mpvue开发小程序教程（二）

标签：product   web   module   主目录   界面   静态   生产环境   cts   请求   

在上篇文章中，我们介绍了使用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来生成发布的代码。

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

// 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"‘
}

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

使用mpvue开发小程序教程（二）

标签：product   web   module   主目录   界面   静态   生产环境   cts   请求   

原文地址：https://www.cnblogs.com/gavinjay/p/10647226.html