前端开发规范

目录

• 一、命名规范
  • 1.项目命名：小写方式，以中划线分隔。
  • 2.目录命名：小写方式，以中划线分隔，有复数结构时，要采用复数命名法，缩写不用复数。
  • 3.vue项目中的compontes中的组件目录，使用kebab-case命名
  • 4.js、css、scss、html、png等文件命名。
  • 5.严谨使用中文‘拼音命名
  • 6.杜绝完全不规范的缩写，避免望文不知义
• 二、HTML命名规范
  • 1.html类型
    • 1.1 缩进使用2个空格
    • 1.2 优先使用语义化标签，避免一个页面都是div或者p标签
    • 1.3 使用双引号而不是单引号
  • 2.css规范
    • 2.1 类名使用小写字母，以中划线分隔
    • 2.2 选择器
    • 2.3 每个选择器以及属性独占一行
    • 2.4 写css的时候省略0后面的单位0px,写作0.
  • 3.less规范
    • 3.1公共的less文件放置在style/less/common文件夹
    • 3.2按以下顺序组织
    • 3.3避免嵌套层级过多
  • 4. javaScript规范
    • 4.1文件命名
    • 4.2方法名、参数名、成员变量、局部变量都统一使用小驼形式
    • 4.3 优先使用es6中的语法
    • 4.4多用大括号和括号
  • 三、Vue项目规范
    • 3.1 组件名kebabCase命名：my-component.vue
    • 3.2 基础组件名为base开头，使用完整单词而不是缩写
    • 3.3 和父组件紧密耦合的子组件应该以父组件名作为前缀命名
    • 3.4 在Template模板中使用组件，应使用大驼峰命名，并且使用自闭和组件
    • 3.5 组件中的data必须是一个函数
    • 3.6 Prop定义应该尽量详细
    • 3.7为组件样式设置作用域
    • 3.8 模板中使用简单的表达式
    • 3.9 指令都应使用缩写形式 用：表示v-bind: 、用@表示v-on: 、用#表示v-slot
    • 3.10 标签顺序
    • 3.11 必须给v-for设置键值key
    • 3.12 v-show和v-if选择
    • 3.13 script标签内部结构顺序
    • 3.14 Vue Router规范

一、命名规范

1.项目命名：小写方式，以中划线分隔。

mall-management-system

2.目录命名：小写方式，以中划线分隔，有复数结构时，要采用复数命名法，缩写不用复数。

正例： scripts / styles / components / images / utils / layouts / demo-styles / demoscripts / img / doc

3.vue项目中的compontes中的组件目录，使用kebab-case命名

head-search/page-loading

4.js、css、scss、html、png等文件命名。

全部采用小写方式，以中划线分隔

render-dom.js/sign-up.css/index.html/company-logo.png

5.严谨使用中文‘拼音命名

6.杜绝完全不规范的缩写，避免望文不知义

二、HTML命名规范

1.html类型

1.1 缩进使用2个空格

1.2 优先使用语义化标签，避免一个页面都是div或者p标签

1.3 使用双引号而不是单引号

2.css规范

2.1 类名使用小写字母，以中划线分隔

ID和class的名称总是使用可以反映元素目的和用途的名称。

2.2 选择器

使用直接子选择器

2.3 每个选择器以及属性独占一行

2.4 写css的时候省略0后面的单位0px,写作0.

3.less规范

3.1公共的less文件放置在style/less/common文件夹

3.2按以下顺序组织

• @import
• 变量声明
• 样式声明

3.3避免嵌套层级过多

4. javaScript规范

4.1文件命名

使用小写驼峰命名lowerCamelCase

4.2方法名、参数名、成员变量、局部变量都统一使用小驼形式

比如：localVlaue/getHttpMessaage()/inputUserId其中method方法savaShopCarData

增删改查、详情统一使用add/delete/update/get/detail

字符串统一使用单引号，不使用双引号

4.3 优先使用es6中的语法

比如说箭头函数（）=>{}/await async/解构/let/for...of等

4.4多用大括号和括号

4.5条件判断和循环最多三层

三、Vue项目规范

3.1 组件名kebabCase命名：my-component.vue

3.2 基础组件名为base开头，使用完整单词而不是缩写

3.3 和父组件紧密耦合的子组件应该以父组件名作为前缀命名

3.4 在Template模板中使用组件，应使用大驼峰命名，并且使用自闭和组件

3.5 组件中的data必须是一个函数

3.6 Prop定义应该尽量详细

• 必须使用驼峰命名
• 必须指定类型：比如type:String
• 必须加上注释，说明其含义
• 必须加上required或者default,两者选其一
• 如果有业务需要，必须加上validator验证

3.7为组件样式设置作用域

3.8 模板中使用简单的表达式

比如说{{name}},复杂的表达式会让你的模板不那么声明式，复杂的值可以用计算属性来获得。

3.9 指令都应使用缩写形式 用：表示v-bind: 、用@表示v-on: 、用#表示v-slot

3.10 标签顺序

3.11 必须给v-for设置键值key

3.12 v-show和v-if选择

如果运行时，需要非常频繁地切换，使用v-show;如果在运行时，条件很少改变，使用v-if

3.13 script标签内部结构顺序

components>props>data>computed>watch>filter>钩子函数>methods

3.14 Vue Router规范

使用路由懒加载机制