一、目的
为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后可以更改此文档。
二、目录规范
- 目录结构的统一化，可读性，分模块、组件构建，防止构建杂乱无章，毫无可读性而言的项目目录。
- 了解开发当前项目所需的框架，工具、插件，功能，兼容性，分辨率等问题做好准备工作。
- 目录结构整齐划一，方便日后的维护和其他同事的阅读。
1、基本目录结构
（1）这里主要介绍开发目录src文件夹。包含以下：
- api：存放接口文件
- components：存放全局公共组件
- config：存放全局配置信息
- help：辅助性方法
- pages：存放页面文件
- utils：工具箱，存放一些公用方法。
- assets：图片存放处，需要按照功能模块在下面创建一个新文件夹来存放该模块下的图片。
- vue.config.js：构建配置文件
2、vue 文件目录规范
该目录是项目文件的核心，主要的页面和逻辑处理都需要在这里创建，它位于pages文件夹下。目前我们配置了多入口打包，所以pages下面可以创建多个文件夹。下面以index文件夹为例。
index文件夹包含以下内容：
router：路由配置文件夹
store：vuex文件存放处
views：vue文件存放处
App.vue: 构建入口模板
main.js：构建入口文件
注意：
vue 页面级目录名称为该页面名称，包含index.vue文件、components文件夹，components文件夹存放该页面级的vue组件文件。
3、命名规范
- 文件夹和文件命名采用驼峰命名法。
注意：对于vue文件名称首字母需大写
三、html规范
标签书写一律使用小写字母。
代码缩进：4个字符。
四、css规范
该项目主要采用less来书写css，并且项目中引用stylelint来进行代码审核，严格按照stylelint规范进行书写。
- class 和 id 命名必须单词全字母小写，单词间以 - 分隔。比如：.login-dialog、#app-page
- class和id命名长度不宜过长，可简写单词。
- 代码缩进：4个字符。
五、图片规范
- 图片命名为单词全字母小写，单词间以 _ 分隔。比如banner_bg.png。
- 有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现。
六、js规范
1、命名规范
- 文件命名同上，为驼峰命名法。
- 函数名和变量命名为驼峰命名法。
- 常量命名为全部大写，中间用下划线分隔。
七、注释规范
1、单行注释
说明：单行注释以两个斜线开始，以行尾结束。
使用方式：
（1） 单独一行：//(双斜线)与注释文字之间保留一个空格。
（2）在代码后面添加注释：//(双斜线)与代码之间保留一个空格，并且//(双斜线)与注释文字之间保留一个空格。
（3）注释代码：//(双斜线)与代码之间保留一个空格。
2、多行注释
说明：以/开头，/结尾
使用方法：
（1）若开始(/)和结束(/)都在一行，推荐采用单行注释。
（2）若至少三行注释时，第一行为/，最后行为/，其他行以开始，并且注释文字与保留一个空格。
代码风格
主要参考百度团队的前端开发规范。
网友评论