Home Explore Help
Sign In
asiainfo
/
static
Watch 2
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 2542 Releases 4 Wiki
Browse Source

增加前端开发规范

guohh 2 years ago
parent
fa15ff24bf
commit
640ffebb4d
1 changed files with 172 additions and 0 deletions
Split View Show Diff Stats
  1. 172 0
      common/规范/Vue移动端开发规范.md

+ 172 - 0
common/规范/Vue移动端开发规范.md
View File 

@ -0,0 +1,172 @@
1 
## 前端开发规范
2
3 
[TOC]
4
5 
### 规范目的
6
7 
*   规范代码一致性，提升团队代码整体质量；
8 
*   便于工程维护有据可循，让新手快速融入开发团队；
9
10 
### 规范说明
11 
*   规范前未说明，为强制规范，须严格遵守，若有场景规范不适用的，请在非规范旁注解说明并反馈;
12 
*   规范前标记推荐的，为推荐规范；
13
14 
### 规范内容
15
16 
#### 命名规范
17
18 
##### 命名原则
19
20 
*   命名使用英文单词，难以翻译的中文名称可使用中文拼音首字母拼接命名，如‘派单综资’，命名为'pdzz'
21 
*   命名的单词数量最多为4个
22 
*   较长单词可考虑使用缩写
23 
*   命名体现本身作用、意义，及区分作用
24 
    *   不使用无意义命名，或数字：1.png, 2.png等
25 
    *   [推荐]避免使用广义名称单词：如name, content，可更换为user-name, tab-content
26
27 
##### 命名法
28 
*   小写中划线分隔命名：单词小写，多个单词以中划线分隔，如：user.js, user-add.js
29 
*   以下列表使用上面命名方式
30 
    *   文件目录
31 
    *   样式类文件（css、scss、less等）
32 
    *   普通js文件
33 
    *   图片文件
34 
    *   html文件
35 
    *   css中class
36 
    *   css函数定义
37 
    *   路由路径
38 
*   大陀峰命名：所有单词首字母大写，多个单词直接拼接，如：Login.vue， AccountRegister.Vue
39 
*   以下列表使用上面方式
40 
    *   Vue文件
41 
    *   js类定义文件
42 
    *   路由名称
43 
*   小陀峰命名：首单词小写，其它单词首字母大写拼接,如：userName, myAge
44 
*   以下列表使用上面方式
45 
    *   js方法
46 
    *   普通变量
47 
*   常量命名：单词大写，多个单词以下划线分隔，如：USER_NAME， AGE
48 
*   以下列表使用上面方式
49 
    *   常量
50
51 
##### 命名修饰
52
53 
*   内部使用修饰：以下划线'_'开头修饰命名，如_components定义模块为当前目录使用组件，非对外
54 
    *   用此修复法修饰非对外暴露目录、文件、方法、属性等
55
56 
#### 目录规范
57
58 
##### 工程结构
59
60 
    public                               入口页面和非打包静态资源目录
61 
    src                                  源码目录
62 
    |-- api                              接口目录
63 
    |   | -- common                      接口服务公共业务封装
64 
    |   | -- xx-xx-api.js                模块接口服务定义
65 
    |   | -- index.js                    接口服务统一入口，所有接口服务模块通过此文件暴露
66 
    |-- i18n                             (可选)国际化资源
67 
    |-- assets                           打包静态资源
68 
    |   |-- images                       图标
69 
    |   |-- styles                       样式定义目录
70 
    |   |   |-- common.xxx               项目公用样式
71 
    |   |   |-- index.xxx                样式入口文件
72 
    |   |   |-- reset.xxx                样式重置
73 
    |   |   |-- mixin.xxx                样式函数定义
74 
    |   |   |-- variable.xxx             样式变量定义
75 
    |   |   |-- ipu.scss                 通用样式（跨项目通用）
76 
    |   |-- fonts                        字体文件
77 
    |-- components                       (可选)项目公用组件
78 
    |-- filters                          (可选)过滤器
79 
    |-- mock                             (可选) 模拟接口，不打入生产环境
80 
    |   |-- 接口调用模拟
81 
    |   |-- 插件调用模拟
82 
    |-- router                           路由定义
83 
    |-- store                            数据存储定义
84 
    |-- util                             项目公共方法、常量定义
85 
    |-- |---constant                     项目常量定义
86 
    |   |-- common                       公共工具方法
87 
    |   |-- index.js                     通用模块暴露入口
88 
    |-- views                            视图目录
89 
    |   |-- accont                       视图模块名
90 
    |   |   |-- Login.vue                模块入口页面
91 
    |   |   |-- _components              模块通用组件文件夹
92 
    |   |   |-- index.js                 模块路由配置
93 
    |   |   |-- style                    模块内样式共用
94 
    |   |-- index.js                     项目路由配置
95
96 
##### api
97
98 
*   api/index.js为所有接口服务模块统一入口
99 
*   common目录定义接口服务公共封装，如统一出错处理、请求时加载框效果等
100 
*   接口服务模块划分与后端接口模块一致
101 
*   接口服务文件命名以-api结尾，如user-manager-api.js
102 
*   接口服务模块内接口请求路径统一定义在paths对象中
103 
*   paths中定义接口路径名称与接口方法名称一致
104
105 
##### assets/images
106
107 
*   common 公共图片目录
108 
*   其它子目录与views模块一致
109 
*   移动端切图尺寸为实际展示尺寸2倍，比如展示区域为10px * 10px，使用切图尺寸为20px * 20px
110 
*   根目录不直接放图片
111
112 
##### assets/styles
113
114 
*   class命名说明
115 
    *   项目公用样式以'common-'前缀
116 
    *   通用样式以'ipu-'为class前缀
117 
*   variable.scss变量命名说明
118 
    *   [推荐]通用变量以css属性为前缀，如$color-primary, $color-warning
119 
    *   [推荐]组件或业务变量以组件或业务名称为前缀，如$button-color, $button-font-size
120 
*   移动端0.5px边框问题
121 
    *   不能直接使用0.5px定义边框，在部分设备上可能不显示，统一使用伪元素处理
122 
    *   预定义上下左右边框class: ipu-fn-bd-t,i pu-fn-bd-b,ipu-fn-bd-l,ipu-fn-bd-r，边框颜色为变量\$borderline-color
123 
    *   边框颜色与\$borderline-color定义不同时，可调用函数 @include borderline(边框位置，颜色值)生成边框样式代码
124
125 
##### views
126
127 
*   目录命名
128 
    *   按模块功能命名，推荐使用单个名词，如account， dashbord等
129 
*   vue文件命名
130 
    *   以大驼峰方式命名，如Login.vue, UserRegister.vue
131 
    *   多个单词时，名词在前，动词在后方式命名，如UserRegister.vue
132 
*   路由配置
133 
    *   模块目录下有index.js文件，用来暴露此模块下页面路由配置信息
134 
    *   view/index.js汇总模块路由并暴露
135 
    *   路由名称与文件名一致
136 
*   _components 模块下业务组件，非通用组件
137
138
139 
#### 其它
140 
#####  [推荐]Vue组件选项定义顺序
141
142 
```js
143 
  - 自定义
144 
  - components
145 
  - setup
146 
  - props
147 
  - data
148 
  - computed
149 
  - watch
150 
  - created
151 
  - mounted
152 
  - methods
153 
```
154
155 
##### 数据状态定义枚举使用常量
156 
* 对数据状态枚举值定义为常量，不在代码直接使用枚举值数字或字符，因为状态值0难以提现状态值的真正意义
157 
```
158 
export const subnumStatusValues = {
159 
  NO_ACCOUNT: '1', // 小号还未开户成功
160 
  UNACTIVE: '2', // 小号还未激活，请先激活
161 
  UNBIND: '3', // 小号未绑定成功，请联系运营商
162 
  OK: '4', // 小号正常可使用状态
163 
  CANCEL: '5' // 此小号已销户
164 
}
165 
```
166
167 
##### eslint
168 
* 代码具体风格以项目eslint为准，编译时不规范的请求，请自行修改
169
170 
##### git
171 
* 勿使用git push -f，不要强制推送
172 
* 会自己解决代码问题，不会的请自行练习（如码云上申请个人仓库练习）