浅谈mpvue项目目录和文件结构
2019独角兽企业重金招聘Python工程师标准>>>
在Visual Studio Code里面打开项目文件夹,我们可以看到类似如下的文件结构:
1、package.json文件
package.json是项目的主配置文件,里面包含了mpvue项目的基本描述信息、项目所依赖的各种第三方库以及版本信息、以及可执行的脚本信息。
我们看到该文件中的scripts
部分配置了4个可执行的命令:
"scripts": {"dev": "node build/dev-server.js wx","start": "npm run dev","build": "node build/build.js wx","lint": "eslint --ext .js,.vue src"
},
dev
和start
是两个等价的命令,执行其中之一都可以将项目以开发模式启动。执行方式是:
npm start
npm run dev
lint
指令是使用ESLint来进行代码语法和格式检查,以及修复一些可自动修复的问题。执行方式是:
#检查语法和格式
npm run lint #检查代码语法和格式,并修复可自动修复的问题
npm run lint -- --fix
build
指令是用于生成发布用代码的,它会对代码进行一些压缩优化处理。当小程序开发完成后,将要提交审核时,请使用build
来生成发布的代码。
npm run build
2、project.config.json文件
project.config.json
文件是用于管理微信开发者工具的小程序项目的配置文件,其中记录了小程序的appid、代码主目录、以及编译选项等等信息,在微信开发者工具中导入小程序项目的时候主要是通过该配置文件读取和写入配置信息。
3、static目录
static
目录可以用于存放各种小程序本地静态资源,如图片、文本文件等。代码中可通过相对路径或绝对路径进行访问, 如:
<image src="/static/img/icon.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: '"https://test.cn:8443"'
})
# prod.env.js
module.exports = {NODE_ENV: '"production"',API_BASE_URL: '"https://app.cn:8443"'
}
那你在编写请求后端API的代码时,你就可以使用这个环境配置,像这样:
const host = process.env.API_BASE_URL;
这样一来,开发阶段和上线发布阶段的环境可以清楚的区分开来。
6、src目录
src
目录是我们主要进行小程序功能编写的地方。默认生成的demo代码为我们创建了几个子目录:components
、pages
和utils
,还有2个文件:App.vue
和main.js
。其实它们都不是必须的,可以按照自己的风格进行定义和配置。不过默认创建的这个结构基本上是一个约定俗成的结构了,比较易于理解,所以我们可以遵循这个结构进行开发。
- components:在实际开发中,我们可以尽量将界面上可复用的部分,提取成vue组件放入该目录。
- pages:存放小程序的页面。请遵循每个小程序页面放入一个单独子目录的组织形式。
- 可选(可删)。可以将代码中一些公用工具函数组织成模块放入该目录下。
- 可新建其他目录,存放你希望组织起来的代码。比如公用的业务逻辑代码、请求后台API的代码等等。
- main.js + App.vue:这两个是入口文件,相当于原生小程序框架中的
app.json
和app.js
的复合体。
参考
https://www.jianshu.com/p/2e98cc166dbd
转载于:https://my.oschina.net/lienson/blog/3015452
浅谈mpvue项目目录和文件结构相关推荐
- 浅谈MAXIMO项目实施(转)
浅谈MAXIMO项目实施 工作以来,参与了XX公司的MAXIMO项目实施,妄谈一些工作中的感受和对MAXIMO的理解,欢迎砖头. [b]对MAXIMO的理解[/b] MAXIMO是老外的软件,是J2E ...
- java 定时任务怎么关闭_浅谈springboot项目中定时任务如何优雅退出
在一个springboot项目中需要跑定时任务处理批数据时,突然有个Kill命令或者一个Ctrl+C的命令,此时我们需要当批数据处理完毕后才允许定时任务关闭,也就是当定时任务结束时才允许Kill命令生 ...
- 阿里浅谈大型项目前端架构设计
1.综合 我在2年之前,写过一篇中小型项目的前端架构浅谈. 随着能力的上升,以及在阿里巴巴工作的经验,是时候写一篇大型项目的前端架构分析了. 本篇文章不会更多侧重于具体技术实现,而是尝试从更高角度出发 ...
- vue项目打包丢入服务器,浅谈vue项目如何打包扔向服务器
当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中.我使用的是 vue-cli(simple) 脚手架,所以就讲一下如何将项目进行打包,并放到 tomcat 上. 如果是 v ...
- 浅谈Android项目中的build.gradle文件
一.gradle简介 gradle是基于groovy语言的. Android Studio是采用Gradle来构建项目的.Gradle是一个非常先进的项目构建工具,使用了一种基于Groovy的领域特定 ...
- 博奥智源,浅谈档案资料目录管理软件开发架构
参数性质 序号 具体技术(参数)要求 1 技术服务内容包含两部分,一是档案资料的整理建库:二是项目档案资料管理软件的开发,实现档案资料数字化管理. 2 1.档案资料整理建库实施要求 按纸质档案数字化技 ...
- 浅谈 Vue 项目优化
前几天看到大家说 vue 项目越大越难优化,带来很多痛苦,这是避免不了的,问题终究要解决,框架的性能是没有问题的,各大测试网站都有相关数据.下面进入正题 基础优化 所谓的基础优化是任何 web 项目都 ...
- 实战录 | 浅谈前端项目构建与优化
<实战录>导语 云端卫士的新栏目<实战录>将会定期分享一些我们的工程师伙伴们在产品研发的过程中总结的实践经验,希望对于热爱技术且关注安全领域的受众有所裨益.本期分享人为云端卫士 ...
- 【浅谈Java项目技术开发基础】
绪论: 忙碌了近半个月终于进入了项目组,开始了真正的学习,挑战.进项目组当然是实战开发做项目了,但是一个真正的项目开发所用的技术有哪些呢?目前我所学,所查,所了解的有 后端部分有: 1.Spring ...
最新文章
- 端口保护:如果你不把我当回事,我就会让你好看
- centos7安装python模块_Linux-Centos7----安装Python的psutil模块插件
- 在你的 iOS App中 使用 OpenSSL 库 转发
- Web程序员的Mysql进阶序三之sql多表数据删除、子查询、联合查询
- [Leetcode][第216题][JAVA][数组之和3][回溯]
- fpga摄像头模块_FPGA开源项目:双目测距(一)之双目图像采集显示以及图片保存...
- mysql connector net 6.9.3_MySQL Connector/Net 6.9.3 发布 MySQL Connector/Net 6.9.3下载
- strcpy、strncpy与memcpy的区别与使用方法
- 杭电2073无限的路.水题
- PHP版本中的VC6,VC9,VC11,TS,NTS区别
- 区块链技术指南之分布式系统核心问题
- PreferenceScreen修改背景颜色
- Python 移动文件 文件转移 文件批量移动小工具
- 如何更改itunes备份位置_Mac怎么修改iTunes的备份路径 如何在 Mac 中修改iTunes的备份路径...
- Exchange 日常管理六之:创建邮箱数据库
- 关于如何实现一个至简的麻将模拟程序的思考
- c语言实现图片轮播,纯css实现轮播图
- 印度内阁小组讨论华为投资 通信部表示支持
- 腾讯云服务器备案要多久?腾讯云小程序备案流程
- 临近年关,为何越来越多的程序员不愿回家,带你盘点那些程序员最怕的几件事