主程序前端开发规范

技术选型

•
vue3​

•
构建工具vue-cli​

•
UI框架arco.design​

•
路由vue-router​

•
状态管理器pinia​

•
图表echarts​

开发与部署

推荐使用yarn包管理工具

安装依赖

代码块

yarn

开发环境

代码块

# 配置.env.development中的VUE_APP_BASE_API，默认为访问接口地址的/dev-api​
# 访问本地后端服务，需修改vue.config.js的proxy的target地址​
yarn dev​

生产构建

代码块

yarn build

代码校验

代码块

yarn lint

开发规范

开发工具

•
统一使用vs code开发​

•
前端依赖包安装使用yarn，镜像源使用淘宝镜像​

•
编码时tab统一为2个空格​

命名规范

•
组件目录使用小驼峰命名方式，多单词拼接首字母写，如：userInfo​

•
组件文件名使用大驼峰命名方式，多单词拼接首字母写，如：Manage.vue​

•
变量名、方法名遵循驼峰命名规则：多单词拼接首字母写，如：userInfo​

•
变量声明（let，const），定义常量使用const，定义变量尽量使用let​

使用ts es6风格进行编码

•
解构赋值​

•
箭头函数​

•
正确使用模块，如果模块只有一个输出值，就使用 export default，如果模块有多个输出值，就不使用 export default，export default 与普通的 export 尽量不要同时使用​

•
多个异步操作时使用Promise对象进行封装​

•
除了三目运算，if,else 等禁止简写​

•
有ts红色警告的地方需要进行处理​

注释规则

•
公共组件的使用说明​

•
各组件中响应变量、重要函数或者类的说明​

•
复杂的业务逻辑处理说明​

•
已注释掉的代码要说明注释原因​

•
多重 if 判断语句需添加说明​

•
注释块必须以/**多行说明 */，单行注释使用//​

指令规范

•
v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一​

•
避免 v-if 和 v-for 同时用在一个元素上​

•
props 定义应该尽量详细​

目录说明

•
api 前端接口目录，其中interceptor.ts为统一拦截器​

•
assets 静态文件如图片及公共样式，icons为svg图标，images是png图片目录，style为公共样式​

主程序前端开发规范​