前端标准规范
总体原则：极简、极快、解耦，主要适用范围：vue 单页项目+
文件组织规范
文件结构
原则：文件少、层级浅、资源集中、相对独立互不影响
基本结构：
.
|_ node_modules
|_ dist
|_ src
|_ assets // 公共资源
|_ img // 全局图片
|- favicon.png
|- common.js // 全局公用 js
|- common.less // 重置样式表 + 自定义全局样式
|- mixin.less // 全局 less 变量
|- template.html // 模板
|_ components // 组件
|_toast
|- index.vue
|- index.less
|- index.js // 所有组件的集合
|_ pages // 具体页面
|_ index // 首页
|- index.vue
|- index.less
|- good.png // 少量本页面下独自使用的图片
|- img // 两个以上页面都用到的图片单独抽离防止
|- copy.jpg
|_ temp // 模板
|- index.vue
|- index.less
|_ router // 路由
|- index.js
|_ vuex // vuex 插件
|- index.js
|- App.vue
|- main.js说明：
关于图片：少量直接放到本页面文件下（资源集中，互不影响），有两个页面以上公用则抽离放到 img 文件夹下（降低层级），assets 下的 img 主要放 favicon.png、pwa等全局图片（低频资源远离，不分散注意力）
assets 目录：放全局资源，此类资源辐射全局，改动频率低，集中在一起，为更好地聚焦核心
temp 文件：不用新建页面，直接复制然后改个文件名即可
文件命名
文件命名统一使用小写字母，必要的时候可以加中划线 -
页面文件名不宜过长，里面的文件统一以 index 为前缀，index.vue、index.less
父子组件命名：
|_ button-group // 组件组合
|_ button // 组件
|_ cell // 父组件
|_ cell-item // 子组件JS 规范
JS 书写格式
借助 Eslint 以及编辑器的代码格式化功能确保代码格式统一
Eslint 使用 JavaScript standard 代码规范
JS 命名
- 全部用单引号
- 统一用驼峰命名法，尽量保持语义化
- 类名开头大写
- 合理使用复数、简称、缩写
- 多写注释，同时保持精炼
css 规范
规则：全部用双引号，小写。每个页面的 css 命名以文件外层文件夹名字加 _index 作为开头（所以说一开始文件夹名字不宜过长），统一使用下划线辅助 _
比如：
.about_index{
.tit{
font-size: 18px;
}
.nav{
margin-bottom: 20PX;
}
}原因：下划线易选中复制，js 中不允许有中划线，js 操作类名夹带中划线互相混在一起，加重记忆负担，容易混淆；文件名称都是不重复的，以文件名作为此页面类名的开头可以确保不会有重复，然后此类名下的命名可与其他页面重复，依靠层级限制类名可重复使用，极大减轻样式命名的工作量
HTML 规范
- 增强语义化：尽量使用 h5 新标签
- 标签嵌套规则，防止诡异错误：ul、ol 下嵌套 li，dl 下嵌套dt、dd，p、dt、h标签里面不嵌套块元素，a 标签不能嵌套 a，行内元素不能嵌套块元素
- 注意 seo 优化：img、a、strong、em、h1-h3
- 格式化标签：span、em、strong 格式化成无语义标签，i 统一给图标使用
- 全部用双引号，小写
性能优化
提交代码前检查
- 图片
必须加 favicon；
有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现；
ps 中的切图 jpg 品质取非常高(80)，然后用 PPDuck 压图工具做无损压缩；
尽量使用 jpg 的图，移动端大张图片不大于 50kb；
移动端使用 2x 图；
避免空的 src 和 href； - a 标签 href 如果为空，统一使用 "javascript:;" 而非 "void(0)"
- border-radius: 2px 值不能为单数，最小为 2px
- 定位元素垂直居中 top 值一般写 45%，50% 看起来会偏下
- 合理的鼠标光标
- 节流防抖
- 类型转换、非空判断
- 异步请求空白处理机制，比如加载 loading
- 统一的错误返回处理机制
- 微信分享标题敏感字，红包、钱...
- app回退、跳转是否正确 iOS、android
- 适配需要考虑 320~750 320 480 640 iphoneX 等
- 扩大点击区域
优化速度
- 页面首次打开请求接口不可超过3个，过多请求需要整合
- 控制域名数量，每个页面请求域名一般有3个，一个主域名，一个静态资源域名，一个埋点分析域名（存在资源并行下载数限制的问题）
- 综合衡量 css、js 的请求数量和包大小，超过 150kb 考虑做拆分
- 后端接口做缓存
- 静态资源统一部署到 CDN
- 开启 zip 压缩
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！