前端项目规范

前端项目规范

项目目录结构

mock
|–xxx.js 前端mock数据文件存放目录
src
|-- api 封装的单个接口
|-- assets 存放图片的目录
|-- components 存放公共组件的目录
|-- |-- GlobalHeader
|-- |-- |-- index.tsx
|-- |-- |-- index.scss
|-- config 全局配置
|-- libs / utils 公共方法
|-- |-- axios.js axios封装
|-- |-- constant.js 常量文件
|-- |-- tools.js 工具方法
|-- router 路由配置
|-- store 存放vuex存储的变量
|-- |-- module
|-- |-- |-- app.js
|-- |-- |-- user.js
|-- |-- index.js
|-- views 存放所有的路由对应的页面
|-- |-- detail 详情页面

代码规范

1.命名规范
命名尽量语义化，少用首字母缩写，禁止出现拼音
组件的命名采用首字母大写+驼峰命名的方式。如GlobalHeader，包含两个文件：index.vue 和 index.scss；
页面的命名采用全小写字母的方式。如warehouse、topic
变量命名：数组：xxxList
选中：selectedXXX
分页：page、pageSize、total
组件内的事件处理方法要求以handle**开头，如handleBtnClick，handlePageChange

常量的定义统一放在utils/constant.js，常量名全部大写，下划线分隔，对象类型的常量使用Object.freeze()

2.注释规范
组件要求必须有专业的注释，说明组件的功能描述、注意事项等，组件内尽量不调用接口，以保证组件的可复用性，保持组件的单一职责
复杂函数要求有专业的注释，说明函数的功能描述、传参、参数类型、返回值、注意事项等
推荐vscode注释插件：koroFileHeader

3.语言规范
声明变量推荐使用 let 关键字.不要再使用 var
优先使用箭头函数
使用模板字符串取代连接字符串
抽取出公共变量和公共函数，如样式文件中公共的颜色值，用scss等预处理工具声明函成变量
不要写重复性代码，出现两次以上的代码块封装成函数，多个页面内频繁使用的方法封装成公共的工具函数（utils/tools.js）
单文件内代码行数不允许超过 600 行，否则必须进行重构

4.格式化规范
html, js, css等一律采用2个空格缩进
if语句的结束括号之后空一行，return语句之后也要空一行
html, json中的引号采用双引号 " ，同时，js中的引号采用单引号 ’
其他的格式化一般在保存时由自动格式化工具完成

常用的vscode插件

prettier
koroFileHeader
Image preview
GitLens — Git supercharged
HTML CSS Support
Typings auto installer
Auto Close Tag
Auto Rename Tag
Better Comments
Code Spell Checker
CSS Modules
npm intellisense
path intellisense
欢迎大家补充自己觉得好用的插件

同一个项目组的开发人员最好统一vscode配置（settings.json） 避免修改别人代码时出现大量的自动格式化导致的修改

代码管理git

尽量在可视化工具中操作git（如sourcetree等）
代码暂存和提交 分支切换等简单操作，可以在vscode中完成
git提交代码之前，删除不必要的控制台打印

项目分支命名：

master分支 线上正式环境
develop分支 开发环境/线上测试环境
feature/xxx 功能开发
bugfix/xxx bug修复

项目打包

打包之前配置一下自动删除console，避免线上项目出现多余的控制台打印

vue项目采用多环境打包配置
测试环境dev模式，正式环境prod模式，不同环境打包时不需要每次都修改baseurl，直接运行对应的打包命令即可
如：
npm run build:test
npm run build:prod
参考链接：多环境打包配置

学会理解「人」，考虑一个傻瓜如何看懂你的代码，考虑一个优化会让屏幕前的某个人体验顺畅，这是前端工作的伟大时刻，学会共情、投入，既然工作，那就 Be professional