前端开发规范文档
前端开发规范文档
目录
概要
为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改
。
开发规范详细
目录结构规范
使用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的c lass命名尽量使用英语，不要使用汉拼，并且有意义。
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/