我们介绍了使用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.js
和main.js
。其实它们都不是必须的,可以按照自己的风格进行定义和配置。不过默认创建的这个结构基本上是一个约定俗成的结构了,比较易于理解,所以我们可以遵循这个结构进行开发。
-
components:在实际开发中,我们可以尽量将界面上可复用的部分,提取成vue组件放入该目录
-
pages:存放小程序的页面。请遵循每个小程序页面放入一个单独子目录的组织形式
-
utils:可选(可删)。可以将代码中一些公用工具函数组织成模块放入该目录下
-
可新建其他目录,存放你希望组织起来的代码。比如公用的业务逻辑代码、请求后台API的代码等等
- main.js + App.vue:这两个是入口文件,相当于原生小程序框架中的
app.json
和app.js
的复合体。
相关推荐
使用mpvue开发小程序简单的小教程,mpvue介绍、mpvue环境搭建 、mpvue项目转换成小程序项目导入运行,mpvue 源码分析 创建页面 绑定事件 循环数据 页面路由跳转 生命周期函数---
这是我第一次开发小程序,开发的产品是音频类的,在大佬的建议下采用了 mpvue ,一周时间把功能都做出来,由于不太熟悉mpvue和微信小程序,足足用了一周时间来改bug才出来一个能用的版本,在这里整理分享下我开发时...
mpvue从底层支持 Vue.js 语法和构建工具体系,同时再结合相关UI组件库,便可以高效的实现小程序开发。这篇文章主要介绍了基于mpvue搭建小程序项目框架 ,需要的朋友可以参考下
第三:mpvue小程序,小程序主要是用 mpvue 框架开发 mpvue 小程序运行步骤: 1、安装node环境 node 是8版本,这边开发版本是8.12.0,由于mpvue属于老牌小程序框架了,目前这边验证的只是这个node版本, 当然新的小...
mpvue是一个使用Vue.js开发小程序的前端框架(美团的开源项目)。框架基于Vue.js核心,mpvue修改了Vue.js的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套Vue.js开发体验。 ...
这个框架支持Vue.js的基本语法和构建工具体系,使得开发者可以利用现有的Vue.js技能和生态系统来开发小程序。本资源旨在为开发者提供一个全面的Mpvue项目介绍和使用教程,帮助你快速上手和深入理解如何在微信小程序...
mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑,在这里分享给大家,让mpvue开发者可以使用vant组件库进行开发,避免踩不必要的坑。 此教程是在dov-yih一同协助下完成。经过测试,Vant ...
mpVue高仿美团小程序教程mpvue-meituan-master.zip uni APP自动更新并安装.vue uni-app nvue沉浸式状态栏(线性渐变色).vue uni-app 二维码生成器分享wxqrcode.zip uni-app 侧边导航分类,适合商品分类页面uni-app...
并不允许,所以找了一个IM第三方框架,采用的是腾讯云的即时通信IM,但是目前腾讯云IM的小程序SDK并没有包含UI,因此就需要自己来开发页面样式和交互,腾讯云IM自己也提供了一个demo,但是使用mpvue框架写的。...
包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python...
高仿美团小程序教程 APP自动更新并安装 沉浸式状态栏(线性渐变色) 二维码生成器分享 侧边导航分类,适合商品分类页面 自定义底部导航栏 全局变量的几种实现方式 富文本编辑器插件 自定义导航栏 聊天实例,支持图片,...
mpVue高仿美团小程序教程 见博客:
mpVue高仿美团小程序教程mpvue-meituan-master.zip uni APP自动更新并安装.vue uni-app nvue沉浸式状态栏(线性渐变色).vue uni-app 二维码生成器分享wxqrcode.zip uni-app 侧边导航分类,适合商品分类页面uni-app...
mpVue高仿美团小程序教程mpvue-meituan-master.zip uni APP自动更新并安装.vue uni-app nvue沉浸式状态栏(线性渐变色).vue uni-app 二维码生成器分享wxqrcode.zip uni-app 侧边导航分类,适合商品分类页面uni-app...
11k+ - 基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系Taro ★3.9k - 使用 React 的方式开发小程序的框架,同时支持生成多端应用Labrador ★1.5k - 支持 ES6/7 的微信小程序组件化开发框架...
使用 Vant Weapp 前,请确保你已经学习过微信官方的小程序简易教程 和自定义组件介绍 安装 方式一. 通过 npm 安装 (推荐) 小程序已经支持使用 npm 安装第三方包,详见npm 支持 # npm npm i vant-weapp -S --...