使用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
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
转载于:https://www.cnblogs.com/wangting888/p/9701184.html
使用mpvue开发小程序教程(二)相关推荐
- 使用mpvue开发小程序教程(一)
[原文地址]mpvue入门系列教程: 如何在mpvue中正确的引用小程序的原生自定义组件 使用mpvue开发小程序教程(六) 使用mpvue开发小程序教程(五) 使用mpvue开发小程序教程(四) 使 ...
- 使用mpvue开发小程序教程(五)
[原文地址]mpvue入门系列教程: 如何在mpvue中正确的引用小程序的原生自定义组件 使用mpvue开发小程序教程(六) 使用mpvue开发小程序教程(五) 使用mpvue开发小程序教程(四) 使 ...
- 使用mpvue开发小程序教程(三)
[原文地址]mpvue入门系列教程: 如何在mpvue中正确的引用小程序的原生自定义组件 使用mpvue开发小程序教程(六) 使用mpvue开发小程序教程(五) 使用mpvue开发小程序教程(四) 使 ...
- 微信小程序开发之——mpvue开发小程序
一 概述 mpvue:Vue.js in mini program,即mini vue.js编程框架 mpvue是把vue.js核心代码经过二次开发的框架,增加了vue.js开发小程序的能力 mpvu ...
- mpvue开发小程序所遇问题及h5转化方案
项目结构 |---build|---pages.js文件目录|---src|---component子组件|---pages|---业务页面|---store,vuex储存|---utils|---请 ...
- mpvue开发小程序前端框架
mpvue是一个使用 Vue.js 开发小程序的前端框架. 一.主要特性: 彻底的组件化开发能力:提高代码复用性 完整的 Vue.js 开发体验 方便的 Vuex 数据管理方案:方便构建复杂应用 快捷 ...
- 使用mpvue开发小程序
一.安装node.js 1.在官网中安装nodejs最新版本.地址:https://nodejs.org/en/download/,根据自己环境,进行下载安装. 2.安装完成后,进行nodejs版本及 ...
- mpvue开发小程序分享朋友圈无法自定义标题解决方法
在node_modules里面找到mpvue,手动修改一下mpvue这个包下的index.js文件 // 用户点击右上角分享 到朋友圈 onShareTimeline: rootVueVM.$opti ...
- mpvue v-html解决方案,mpvue开发小程序所遇问题及h5转化方案
wx这个对象我们可以结合router和vux封装一下其中的navigateTo,redirectTo等路由及模态框和toast,并在webpack.base.conf配置wx指向该文件,这样我们就能直 ...
最新文章
- OpenCV(基础补充)图像二值化
- golang python rpc_grpc - 使用 golang 带你从头撸一套 RPC 服务(一)
- 环形、扭环、LFSR计数器
- dpkg ---- apt-get ------ aptitude 三种方式的区别 及命令格式
- 计算机体系结构知识笔记
- Android之通过Binder机制实现IPC和linux的传统IPC的对比分析
- 让网站变成灰色插件 可以设定特殊时间
- 布丰投针java实现,MATLAB模拟布丰投针实验
- 【PyTorch】推荐收藏!史上最全的 PyTorch trick 集锦
- Android ViewModel组件详解
- 软件测试(四):软件测试用例设计
- 微信小程序反编译解包教程
- 直播 | IJCAI 2021论文解读:生理时间序列的分类方法及其在睡眠分期的应用
- android开发下载网络图片到相册工具类适配Q及以上
- 机器学习入门实战——决策树算法实战Titanic数据集
- mysql 5.7 lbs_使用mysql来实现lbs(地理位置服务)功能
- 面经分享 | 2年经验,1个月拿下阿里P6 Offer
- 程序员给孩子买什么保险好,要注意避免什么坑呢?
- 文件下载显示进度条以及调取浏览器下载进程
- 卫星图在线浏览地址大全