web 前端开发规范 (vue方向)

---

一、目录结构

---

1.1 只列出了src下的目录结构，项目环境目录自行配置

.
|─── src
|    |─── api  // 网络接口封装
|         |─── home-api.js
|         |─── user-api.js
|    |─── assets  // 资源文件
|         |─── icons  // 图标
|         |─── images  // 图片
|         |─── fonts  // 字体
|    |─── components  // 复用组件
|         |─── c-header.vue
|         |─── c-table.vue
|         |─── c-icon.vue
|    |─── router // 路由
|         |─── index.js
|    |─── store // vuex
|         |─── index.js
|         |─── getters.js
|         |─── modules  // 模块化管理
|              |─── app.js
|              |─── user.js
|    |─── styles  // 样式
|         |─── base.less  // 基础样式
|         |─── common.less  // 公用样式
|         |─── modules  // 模块样式
|              |─── v-home.less
|              |─── v-footer.less
|              |─── product-info.less
|    |─── utils  // 工具类
|         |─── index.js
|         |─── validate.js
|    |─── views  // 业务代码
|         |─── v-home.vue
|         |─── v-header.vue
|         |─── v-footer.vue
|         |─── product-info.vue
|    |─── App.vue  // 根组件
|    |─── main.js  // 程序入口

---

二、代码风格

---

2.1 代码缩进tab为4个空格的宽度（而不是4个空格）；

* 错误示例

• 正确示例

2.2 return上方有代码时，回车一行

• 正确示例

 offsetType () {
    let type = 'top';
    if (this.offsetBottom >= 0) {
        type = 'bottom';
    }

    return type;    // 上方回车一行
}      

classes () {
    return '';    // 无代码时候上方不必回车一行
}        

2.3 所有的冒号:后面空格一个

• 正确示例

name: 'Affix',
props: {
    offsetTop: {
        type: Number,
        default: 0
    },
    offsetBottom: {
        type: Number
    }
},

2.4 所有的函数参数前后各空格一个

• 正确示例

methods: {
    close (e) {
        this.closed = true;
        this.$emit('on-close', e);
    }
},
mounted () {
    this.desc = this.$slots.desc !== undefined;
}

2.5 所有的赋值等号=前后空一格

• 正确示例

const docEl = window.document.body;
const clientTop = docEl.clientTop || 0;
const clientLeft = docEl.clientLeft || 0;

2.6 HTML中所有的属性都采用双引号""

• 正确示例

2.7 JS中，所有的字符串都采用单引号''

• 正确示例

---

三、开发原则

---

3.1 自闭和组件在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。

* 错误示例

• 正确示例

3.2 判断是否相等使用 === 号 不等使用 !== 号

• 正确示例

var count = "1"
var dot = 1
var status = true

if (count) {
    status = !(parseInt(count) === 0);
}

if (dot) {
    status = true;
    if (count !== null) {
        if (parseInt(count) === 0) {
            status = false;
        }
    }
}

3.3 props 接收值时，写明接收类型

• 正确示例

3.4 在插件、混入等扩展中始终为自定义的私有属性使用 _ 前缀。并附带一个命名空间以回避和其它作者的冲突 (比如 $yourPluginName)。

* 错误反例

var myGreatMixin = {
  // ...
  methods: {
    update: function () {
      // ...
    }
  }
}

var myGreatMixin = {
  // ...
  methods: {
    _update: function () {
      // ...
    }
  }
}

var myGreatMixin = {
  // ...
  methods: {
    $update: function () {
      // ...
    }
  }
}

var myGreatMixin = {
  // ...
  methods: {
    $_update: function () {
      // ...
    }
  }
}

• 正确示例

var myGreatMixin = {
  // ...
  methods: {
    $_myGreatMixin_update: function () {
      // ...
    }
  }
}

3.5 禁止使用内联样式

* 错误示例

3.6 CSS样式声明遵循以下顺序：

• 正确示例

1)  结构性属性：
a)  display
b)  position, left, top, right 等.
c)  overflow, float, clear 等.
d)  margin, padding
2)  表现性属性：
a)  background, border 等.
b)  font, text

3.7 为组件样式设置作用域，组件内样式应使用scoped属性。

3.8 元素选择器应该避免在 scoped 中出现。

* 反例

• 正确示例

---

四、性能优化

---

4.1 v-for使用注意事项

在组件上总是必须用 key 配合 v-for，以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为，比如动画中的对象固化 (object constancy)，也是一种好的做法。
* 错误示例

    

        {{ todo.text }}
    

• 正确示例

    

        {{ todo.text }}
    

    

        {{ todo.text }}
    

4.2 永远不要把 v-if 和 v-for 同时用在同一个元素上。

* 错误示例

    

        {{ user.name }}
    

• 正确示例

    

       {{ user.name }}
    

4.3 CSS优化

4.3.1 慎重选择高消耗的样式

4.3.2 高消耗属性在绘制前需要浏览器进行大量计算

box-shadows
border-radius
transparency
transforms
CSS filters（性能杀手）

4.3.3 避免过分重排

width
height
padding
margin
display
border-width
position
top
left
right
bottom
font-size
float
text-align
overflow-y
font-weight
overflow
font-family
line-height
vertical-align
clear
white-space
min-height

4.3.4 正确使用 Display 的属性Display 属性会影响页面的渲染，请合理使用。

display: inline后不应该再使用 width、height、margin、padding 以及 float；
display: inline-block 后不应该再使用 float；
display: block 后不应该再使用 vertical-align；
display: table-* 后不应该再使用 margin 或者 float；

4.3.5 不滥用 Float

Float在渲染时计算量比较大，尽量减少使用。

---

五、命名规范

---

5.1 所有的文件夹及文件名称以-中划线分割多单词命名

• 正确示例

.
|───components
|   |───base-module
|       |───base-nav.vue
|       |───base-table.vue
|       |───base-icon.vue
|   |───common-module
|       |───c-header.vue
|       |───c-table.vue
|       |───c-icon.vue

5.2 基础组件命名应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。

• 正确示例

components/
|- base-button.vue
|- base-table.vue
|- base-icon.vue

5.3 props 接收值时，命名采用驼峰命名规则

• 正确示例

5.4 JS 对象或JSON的属性命名:字母小写，多个单词组成时，采用下划线分隔。

• 正确示例

var obj = {
    result_type: '',
    name: '',
    status_show: ''
}

5.5 JS 函数命名:使用动宾短语和驼峰命名法，参数也使用驼峰命名法，可选参数以 opt_ 开头.

• 正确示例

function getStyle(element, opt_child) {}

5.6 JS 类:使用名词和Pascal 命名法（与骆驼命名法类似。只不过骆驼命名法是首字母小写，而帕斯卡命名法是首字母大写），类的 方法 / 属性, 使用驼峰命名法。

• 正确示例

function Engine(options) {}

5.7 boolean 类型的变量使用 is 或 has 开头。如果在对象中使用is_或has_或show_开头

• 正确示例

var isReady = false;
var hasMoreCommands = false;
var showHeader = false;
var obj = {
    is_show: false,    
    has_name: true,
    show_header: false
}

5.8 vuex命名

5.8.1 getter、state采用驼峰命名，

state: {        
    userInfo: null,
    roles: []
}

getters: {
  getToken: state => state.user.token,
  userName: state => state.user.name
}

5.8.2 actions采用驼峰命名，以功能性词汇开头。

getUserInfo (context) {  
 // 获取用户信息
}

setStateWords (context) {
// 设置
}

5.8.3 mutations采用大写命名，以功能性单词开头，多单词以 _下划线分割

mutations: {
    SET_TOKEN: (state, token) => {
        state.token = token
    },
    SET_USER_INFO: (state, userInfo) => {
        state.userInfo = userInfo
    },
    TOGGLE_SIDEBAR: state => {      
      state.sidebar.opened = !state.sidebar.opened
    }   
},

5.9 CSS类名一律采用- 分割多单词名称

• 正确示例

.base {
    color: red;
}

.base-info {
    color: green;
}

.base-menu {
    color: yellow;
}

附件

附件一、常用的CSS命名规则

头：header 
内容：content/container 
尾：footer 
导航：nav 
侧栏：sidebar 
栏目：column 
左右中：left right center 
登录条：loginbar 
标志：logo 
广告：banner 
页面主体：main 
热点：hot 
新闻：news 
下载：download 
子导航：subnav 
菜单：menu 
子菜单：submenu 
搜索：search 
友情链接：friend-link 
页脚：footer 
版权：copyright 
滚动：scroll 
内容：content 
标签：tags 
文章列表：list 
提示信息：msg 
小技巧：tips 
栏目标题：title 
加入：joinus 
指南：guide 
服务：service 
注册：regsiter 
状态：status 
投票：vote 
合作伙伴：partner

附件二、页面结构常用的CSS命名

容器: container 
页头：header 
内容：content/container 
页面主体：main 
页尾：footer 
导航：nav 
侧栏：sidebar 
栏目：column 
左右中：left right center

附件三、页面导航常用的CSS命名

导航：nav 
主导航：mainnav 
子导航：subnav 
顶导航：topnav 
边导航：sidebar 
左导航：leftsidebar 
右导航：rightsidebar 
菜单：menu 
子菜单：submenu 
标题: title 
摘要: summary

附件四、功能性常用的CSS命名

标志：logo 
广告：banner 
登陆：login 
登录条：loginbar 
注册：register 
搜索：search 
功能区：shop 
标题：title 
加入：joinus 
状态：status 
按钮：btn 
滚动：scroll 
标?页：tab 
文章列表：list 
提示信息：msg 
当前的: current 
小技巧：tips 
图标: icon 
注释：note 
指南：guild 
服务：service 
热点：hot 
新闻：news 
下载：download 
投票：vote 
合作伙伴：partner 
友情链接：link 
版权：copyright

---

六、注释风格

---

6.1 HTML注释

...

6.2 CSS注释

/* ==========================================================================
   组件块
 ============================================================================ */

/* 子组件块
 ============================================================================ */
.selector {
  padding: 15px;
  margin-bottom: 15px;
}

/* 子组件块
 ============================================================================ */
.selector-secondary {
  display: block; /* 注释*/
}
.selector-three {
  display: span;
}

6.3 JS函数注释

/**
 * 函数描述
 *
 * @param {string} p1 参数1的说明
 * @param {string} p2 参数2的说明，比较长
 *     那就换行了.
 * @param {number=} p3 参数3的说明（可选）
 * @return {Object} 返回值描述
 */
function foo(p1, p2, p3) {
    var p3 = p3 || 10;
    return {
        p1: p1,
        p2: p2,
        p3: p3
    };
}

6.4 区块注释

6.5 文件注释

/**
 * @fileoverview Description of file, its uses and information
 * about its dependencies.
 * @author ***@***.com (Firstname Lastname)
 * Copyright 2015 *** Inc. All Rights Reserved.
 */