vue前端代码开发规范
开发工具使用
- 建议使用统一开发工具vscode
- vscode 使用插件建议
- Bracket Pair Colorizer => 彩虹括号，不同嵌套级别的括号不同的颜色
- GitLens => git工具
- Past and Indent => 粘帖代码正确缩进修正
- vetur => vue 插件
- 使用统一缩进，以tab缩进，一个tab大小为2个空格
html代码编写规范
- 使用语义化标签如section footer header 进行布局页面结构
- 使用标准html5文档类型声明
- 使用utf-8 编码 <meta charset="utf-8">
- 尽量使用比较少的标签
标签使用
- 使用尽量贴合语意，如，布局容器使用div，段落使用p。数据列表使用ul/ol/dd等，关键字使用strong，标题使用h1~h6，图标使用 i；
class命名规范
- 参与到ui交互的class使用前缀js-的命名规则，与定义样式的class区别开
- 参与布局的class使用前缀ly- （layout简称）
- 全局class使用前缀g-
- 对页面和组件统一命名，如页面需要添加class=”page-页面名” 组件添加class=”component-组件名”进行区分
- 取名尽量贴合语意 （使用翻译软件翻译下）
- 页面须有一个私有的class选择器空间 scoped
样式编写规范
- 布局以流式布局为主，禁止滥用绝对定位，只在有必要的时候才使用绝对定位
- 样式书写区分全局样式，布局样式，单元样式，页面私有样式，
- 页面私有样式应写在页面scoped 私有class下面
- 单元样式的选择器不许包含页面私有的class及布局class，以便于单元样式的复用
- 装饰性的背景图尽量写在样式里，源于风格样式和内容区分的思想
- 建议使用预处理样式 stylus 或scss,建立基础预定义样式文件:
- reset//样式重置
- variables//变量文件，包括如color，btn size，风格相关的颜色、尺寸应定义在variables 里面，便于定义与切换风格
- mixins//混合样式定义
- index//全局样式定义
公有样式文件 public.styl 依次引用 reset.styl variables.styl mixins.styl global.styl
- 统一定义字体大小如： medium normal large small mini 类，全局统一定义字体大小（大多数地方）
- 图标建议统一使用字体文件或者SVG文件
- 如非必要，不让选择器深度超过3层
IE 兼容模式
- 优先使用最新版本的IE 和 Chrome 内核
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
移动端样式书写规范
- 尽可能使用以屏幕宽度为参照的等比例布局
以js根据屏幕宽度动态计算根元素font-size 变换 rem 与 px 换算比例，做到等比缩放 - 定义 viewport 为移动端设备优化，设置可见区域的宽度和初始缩放比例,禁止用户手动缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
js代码编写规范
- 函数/方法，要添加功能注释
- 函数/方法要保持功能单一，一个方法只做一件事情，复杂的功能要进行拆分
- 来自于接口返回的数据，和来自于本地存储的数据使用之前要做容错处理，保证程序健壮性
- 该用switch 的时候用switch，滥用if/else会使程序的可读性变差
- 在一票否决的情况下，可以采用写法如if(x)return 减少代码块嵌套深度
vue项目规范
- 组件私有样式要添加scoped作用域属性，或用当前组件的唯一class 名包裹，公共样式应写在公共样式文件里面
- 布局应抽离到单独的布局文件中 ，做到页面内容和布局的代码分开到不同的文件里面
- 一个项目中 stylus less sass 只允许使用一种，建议使用stylus
vue 项目目录结构规范
src
|—— api 接口定义目录 （http.js定义axios封装和公共路径配置；api.js定义每个接口）
|—— assets 静态文件目录
|—— components 公共组件目录 （可将查询，表格，分页或者布局类的组件封装为公共组件）
|—— const 常量目录 （filter.js过滤器、固定不经常改的常量制作）
|—— pages/views 页面目录
|—— plugins 第三方插件目录
|—— router 路由定义目录
|—— store vuex 状态管理定义目录
|—— styles 样式目录 scss|sass|stylus 预处理方式
|——icons.scss 图标样式
|——index.scss 入口样式文件
|——reset.scss 重置所有标签
|——resetModel.scss 重置ele模态框
|——resetMessage.scss 重置ele消息框
|——resetTable.scss 重置ele表格
|——resetPagination.scss 重置ele分页
|——variable.scss 重置ele主题变量
|——mixins.scss 重置elemixins变量
等等，根据需求再添加新的
|—— utils 工具库目录 （时间日期处理方法datetime.js；以及其他的制作为一个文件）
