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个空格);

* 错误示例



    
        
            
                    Document

    
        

  • 正确示例



    
    
    Document

    
        

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-ifv-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 getterstate采用驼峰命名,
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.
 */

你可能感兴趣的:(web 前端开发规范 (vue方向))