# 前端开发编码规范

### 仓库管理

前端仓库统一新路径携带frontend， 仓库标识v

### 目录结构

项目模板结构如下：

![303f0d46c0b2c2d10405b523d65452b6.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/1GXn45KdJgK0yqDQ/img/a602fc0b-b3f9-410e-b080-7745c583324e.png)

#### 1、文件夹命名

文件夹命名规范小写字母，中划线“-”链接

![/Users/mima000000/Desktop/截屏2025-08-06 17.26.09.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/1GXn45KdJgK0yqDQ/img/c0760fc7-4606-4f84-b2f8-f4423ca58438.png)

#### 2、文件命名

vue 组件双驼峰命名，其他.ts/.css/less/scss/js等文件驼峰命名

示例一：

![/Users/mima000000/Desktop/截屏2025-08-06 17.28.21.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/1GXn45KdJgK0yqDQ/img/7c11d500-4605-4158-9e9a-56c5fcc9736e.png)

示例二：

![/Users/mima000000/Desktop/截屏2025-08-06 18.21.50.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/1GXn45KdJgK0yqDQ/img/9c4fffae-9af2-48ba-bba9-67040c25426c.png)

### 编码

#### 1、单文件组件格式

按照script标签、 template标签与 style标签的从上到下的顺便依次排列

![/Users/mima000000/Desktop/截屏2025-08-06 18.29.19.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/1GXn45KdJgK0yqDQ/img/3353732b-443a-452d-94ba-b1212d2cec2e.png)

####  2、缩进换行

* 换行按照2个空格缩进

* 不允许超过两行及其以上的空白行

* 单行注释不超过两行，否则采用多行注释，多行注释后不带空白行

示例一：

![1754558195921_DFEA4A0E-E841-4bef-8B76-8412AFF372F6.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/3M0OzeZQ0LZBQqze/img/11a0e675-5376-4f9a-9a37-028e6e892233.png)

![1754560945039_BEF285ED-3FBD-472a-8EDA-F7480C1AE04E.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/1GXn45KdJgK0yqDQ/img/6df0aabc-cda7-455a-9eac-c665f93c8d2f.png)

示例二：

![1754558478870_E58BBCA3-8B66-4905-9569-E97924406FD1.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/3M0OzeZQ0LZBQqze/img/c1474020-e5dd-491c-8e53-290ba8806034.png)

#### 3、标签

* 自定义组件标签使用双驼峰命名

* 第三方引入的组件标签用小写中划线连接，且使用双闭合标签

* 标签属性超过三个以上必须换行

* 标签属性顺序：指令v-if/v-show > id标识属性 >原生属性style/class -> 动态props属性 -> 事件属性

示例一：

![1754561011224_BDEE10A4-7874-4b2f-8F69-5197F3262EC0.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/1GXn45KdJgK0yqDQ/img/c6a3e209-2675-4ec1-b7e7-21ee6db32dcb.png)

示例二：

![image.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/3M0OzeZQ0LZBQqze/img/52785681-48c0-42ab-bed4-c54d7a778c46.png)

示例三：

![1754557893102_D199F769-2B51-43fd-A3DA-307690FCDB4A.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/3M0OzeZQ0LZBQqze/img/790fe474-bad6-4de7-a24c-50eb32ef57eb.png)

#### 4、样式

* 标签内联样式，不允许超过两项，否则采用class类名

* class命名采用小写字母，用横线或是下划线连接

* 样式属性的顺序，盒子模型尺寸属性（position/width/height/display/flex等） > 定位布局属性(top/right/bottom/left/margin/padding等) > 颜色字体背景（color/font-size/background等）

示例一：

![/Users/mima000000/Desktop/截屏2025-08-06 18.42.22.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/1GXn45KdJgK0yqDQ/img/98decc0c-327a-4526-bdd9-7d56be69be92.png)

示例二

![/Users/mima000000/Desktop/截屏2025-08-06 18.48.22.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/1GXn45KdJgK0yqDQ/img/77dfd7d9-2d7f-450e-82f1-9d3d5bb8b49e.png)

#### 5、变量声明

* 变量引入，import 引入实例、方法/函数、变量采用驼峰命名法

* 变量引入，import 引入class类名、组件名采用双驼峰命名法

* 变量声明中，class类名以及组件名称用双驼峰命名外，其他全部用驼峰命名

* 变量的声明与引入中，object属性超过三个以上必须换行显示

* 常量的声明使用大写字母，可采用\_下划线连接

示例一：

![/Users/mima000000/Desktop/截屏2025-08-06 18.54.34.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/1GXn45KdJgK0yqDQ/img/1bb61370-df38-4e58-9ce3-98ce54b66211.png)

#### 6、函数表达式格式

* 箭头函数 => 必须前后带有空格

* 复制等号 “=”、“==” 、“===” 必须前后带有空格

* 三目运算符  a > 0  ? b : 0 必须带有空格

* 断言 if 与 循环for （）必须带有空格

* 表达式中的”,“、”>“、 “<”、”?“、”:“ 符号后带有空格

* 断言if 成立 后面的return， 单独成行，不带大括号{}

* 迭代器中函数=>后的返回值，单独成行，不带大括号{}

示例一：

![1754559987743_2C9A8481-24A6-47eb-ADDE-E352E7BC9F86.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/1GXn45KdJgK0yqDQ/img/4e1a6087-66f0-41da-b8db-5bd0430d9281.png)

示例二：

![1754560377662_AAC14B11-178B-4444-BA08-27B6F2D59F1B.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/1GXn45KdJgK0yqDQ/img/e29964e2-69cb-411e-86d9-cab51b8ddf2e.png)

示例三：

![1754560259354_2EBDEAF2-CD7B-45c1-9E79-FAC1EA410AB7.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/1GXn45KdJgK0yqDQ/img/c58164a1-63bb-4d07-adc7-fd71ff0eb17d.png)

示例四：

![1754560878712_B7B5FCBE-698A-4996-BB47-53CC8B085823.png](https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/1GXn45KdJgK0yqDQ/img/0ecd5eb0-7336-4960-ab0e-5ad4db8f8e88.png)

#### 7、SDK版本管理

* 统一vue/vue-router等插件版本

* 不允许保留冗余的插件包

* 不引入未使用的实例、函数/方法、组件变量