前端开发规范文档

目录

概要

开发规范详细

目录结构规范

文件、组件、组件结构命名规范

Template规范

​​​​​​​JS规范

​​​​​​​CSS规范

​​​​​​​图片规范

​​​​​​​API管理规范

弹框，提示信息规范

其他

前端规范插件

---

​​​​​​​

概要

为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改。

• 开发规范详细

• 目录结构规范

使用Vue-cli脚手架会搭建项目生成如下目录结构，添加文件时请在对应的位置进行添加。

 ├── index.html                      入口页面

    ├── build                           构建脚本目录

    │   ├──build.js                        生产环境构建（编译打包）脚本

    │   ├──check-versions.js             版本验证工具

    │   ├──utils.js                        主要用来处理css类文件的loader

    │   ├──vue-loader.conf.js            处理vue中的样式

    │   ├── webpack.base.conf.js         webpack基础配置

    │   ├── webpack.dev.conf.js          webpack开发环境配置

    │   └── webpack.prod.conf.js          webpack生产环境配置

    ├── config                          项目配置

    │   ├── dev.env.js                      开发环境变量

    │   ├── index.js                        项目配置文件

    │   ├── prod.env.js                     生产环境变量

    │   └── test.env.js                     测试环境变量

    ├── dist                            打包好的项目

    │   ├── html                             静态问件

    │   ├── conf                             nginx配置文件

    │   └── 其他                              nginx需要的文件

    ├── node_modules                        项目依赖模块    

    ├── src                             项目源码目录    

    │   ├── main.js                         入口js文件

    │   ├── app.vue                         根组件

    │   ├── components                     公共组件目录

    │   ├── assets                          资源目录，资源会被wabpack构建

    │   │   └── css                             第三方css文件，全局css文件

    │   │   └── font                            字体

    │   │   └── less                            全局less

    │   │   └── images                          图片

    │   │       └── logo.png

    │   ├── routes                           前端路由

    │   │   └── index.js

    │   ├── pages                            前端页面文件

    │   │   └── index.vue

    │   ├── vuex                             应用级数据（state）

    │   │   └── store.js                        分组数据存贮

    │   ├── service                          公共服务文件

    │   │   └── service.js                      处理公共请求，响应数据

    │   │   └── util.js                          处理公共js操作方法

    ├── static                          纯静态资源，不会被wabpack构建。

      └── baseUrl.json         公共后台ip地址 

文件、组件、组件结构命名规范

文件

文件名称应统一格式，使用驼峰命名法，开头的单词就是所属模块名字（例如：workbenchIndex、workbenchList、workbenchEdit）

组件

组件名以单词大写开头，当多个单词拼写成的组件时，采用驼峰式命名规则。一般是多个单词全拼，减少简写的情况，这样增加可读性。

组件应该都放到components文件夹下，单个页面独立一个文件夹，用来放相对应的VUE文件以及页面相关的样式文件，样式少可直接写到页面组件里边，这样更符合组件化的思想。

​​​​​​​组件结构

组件结构遵循从上往下template，script，style的结构。

​​​​​​​Template规范

1、尽量使用以.vue结束的单文件组件，方便管理，结构清晰。

2、标签语义化，避免清一色的div元素

3、多特性，分行写，提高可读性。即一个标签内有多个属性，属性分行写。

4、自定义标签：使用自闭标签的写法。例如：，如果自定义标签中间需要传入slot，则写开始标签和结束标签，结束标签必须加/。

​​​​​​​JS规范

1、在 Script 标签中，应该遵守 JS的规范和ES6规范。

2、创建公共的JS，封装公用的方法和工具类。

3、使用ES6风格编码源码,定义变量使用let,定义常量使用const,使用export,import模块化。

4、需要使用函数表达式的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了 this。

5、若循环中需使用函数，请将函数定义在循环外部而非内部，这样可以避免函数的反复创建。

6、Props定义：提供默认值，使用Type属性校验类型，使用Props之前先检查Prop是否存在。

7、JS中统一使用反引号（``）或是单引号('')， 不使用双引号("")。

8、v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一，key一般使用index或者item.id。

9、避免 v-if 和 v-for 同时用在一个元素上（性能问题），以下为两种解决方案：

（1）将数据替换为一个计算属性，让其返回过滤后的列表。

（2）将 v-if 移动至容器元素上 (比如 ul, ol)。

10、无特殊情况不允许使用原生API操作DOM,谨慎使用this.$refs直接操作DOM。

11、函数中统一使用_this=this来解决全局指向问题。

​​​​​​​CSS规范

1、CSS的class命名尽量使用英语，不要使用汉拼，并且有意义。

2、使用单词命名时不要缩写，除非非常有名的单词。

3、规则命名中，一律采用小写加中划线的方式，尽量避免使用大写字母或 _   例如（header-list）。

4、不允许通过1、2、3等序号进行命名。

5、避免class与id重名。

6、省略值为 0 时的单位，如margin：0px 应写成 margin:0;。

7、如果 CSS 可以做到，就不要使用 JS,比如鼠标划过和一些简单地动画效果。

8、创建一个公共的CSS文件，存放公共的样式，不需要每个页面单独复制一份。

9、使用 scoped关键字，约束样式生效的范围。

10、避免使用标签选择器（效率低、损耗性能）。

11、sass和less都是css的预编译处理语言，他们引入了mixins，参数，嵌套规则，运算，颜色，名字空间，作用域，JavaScript赋值等，两者的区别在于 

1）.编译环境不同

   less是通过js编译 是在客户端处理

   sass同通过ruby 是在服务器端处理

2）变量符不一样

    less是用@,sass是用$

3）sass支持条件语句，可以使用if{}else{},for{}循环等等。而less不支持。

4）less没有输出设置，sass提供4中输出选项：nested, compact, compressed 和 expanded。

​​​​​​​图片规范

1、每个模块都要增加一个图片文件夹方便后期维护和处理，图片文件命名尽量跟模块意义的相同，尽量使用小写单词命名。

2、图片格式常用png，jpg，gif。

3、命名全部用小写字母，数字及中划线组合，其中不包含汉字、空格和特殊字符；尽量用易懂的词汇，便于团队其他成员理解；命名分头尾两部分，用中划线隔开，（例如：ad-left01.png、btn-submit.png）。

4、在保证视觉效果的情况下选最小的图片格式与图片质量，减少加载时间。

​​​​​​​API管理规范

1、API接口地址统一管理，接口较少时可以单独写一个接口文件JS，页面中使用哪些引入哪些。

2、接口较多时，可对接口按模块进行分类，一个模块对应一个接口文件。

弹框，提示信息规范

弹框

1.普通新增和编辑弹框，上传文件弹框 宽度设置为50%。

2.弹框内容较多时 宽度设置为70%。

3.高度都为自适应，由弹框内容撑开。

确认弹框

使用Element-UI自带的MessageBox 弹框。

​​​​​​​提示信息

使用Element-UI提供的Message 消息提示。

其他

1、文字超出容器需要进行 '...' 省略。

2、图片显示 无特殊要求时，按原图宽高比显示，尽量不要变形。

3、涉及数据处理功能按钮，增加防频繁点击处理。

4、小图标尽量使用UI框架自带的icon图标。

5、页面按钮颜色，样式，功能尽量统一。

6、不同页面相同功能的提示文字尽量统一。

前端规范插件

1、HTML / tpl:  HTMLHint 

2、CSS / SCSS: StyleLint

3、JS / JSX: ESLint  https://eslint.bootcss.com/docs/rules/