一、目录结构
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个空格）；
* 错误示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<p>
</p>
</div>
</body>
</html>
- 正确示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p></p>
</body>
</html>
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中所有的属性都采用双引号""
- 正确示例
<div class="class" style="style" title="title">
<span :class="messageClasses"></span>
<input type="text" placeholder="请输入内容">
<span name="desc" :class="descClasses"></span>
</div>
2.7 JS中，所有的字符串都采用单引号''
- 正确示例
<script>
var string = 'string'
export default {
name: 'AutoComplete',
}
</script>
三、开发原则
3.1 自闭和组件在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。
* 错误示例
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent></MyComponent>
<!-- 在 DOM 模板中 -->
<my-component/>
- 正确示例
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>
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 接收值时，写明接收类型
- 正确示例
<script>
export default {
name: 'CCardHalf',
props: {
title: {
type: [String, Number],
default: ''
},
showMember: {
type: Boolean,
default: false
},
isAuthentication: {
type: Boolean,
default: false
}
}
};
</script>
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 禁止使用内联样式
* 错误示例
<div style="width: 100px;height: 200px;">
<span style="font-weight: 700;color: red;"></span>
</div>
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属性。
<!-- 使用 `scoped` 特性 -->
<style scoped>
.button {
border: none;
border-radius: 2px;
}
.button-close {
background-color: red;
}
</style>
3.8 元素选择器应该避免在 scoped 中出现。
* 反例
<template>
<button>X</button>
</template>
<style scoped>
button {
background-color: red;
}
</style>
- 正确示例
<template>
<button class="btn btn-close">X</button>
</template>
<style scoped>
.btn-close {
background-color: red;
}
</style>
四、性能优化
4.1 v-for使用注意事项
在组件上总是必须用 key 配合 v-for，以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为，比如动画中的对象固化 (object constancy)，也是一种好的做法。
* 错误示例
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
- 正确示例
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ul>
<ul>
<li v-for="(todo, index) in todos" :key="index">
{{ todo.text }}
</li>
</ul>
4.2 永远不要把 v-if 和 v-for 同时用在同一个元素上。
* 错误示例
<ul>
<li v-for="user in users" v-if="user.isActive" :key="user.id">
{{ user.name }}
</li>
</ul>
- 正确示例
<ul v-if="shouldShowUsers">
<li v-for="user in users" :key="user.id">
{{ user.name }}
</li>
</ul>
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 接收值时，命名采用驼峰命名规则
- 正确示例
<script>
export default {
name: 'CCardHalf',
props: {
title: {
type: [String, Number],
default: ''
},
showMember: {
type: Boolean,
default: false
},
isAuthentication: {
type: Boolean,
default: false
}
}
};
</script>
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注释
<!-- 文章列表列表模块 -->
<div class="article-list">
...
</div>
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 区块注释
<!--
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@author: ***(***@***.com)
-->
6.5 文件注释
/**
* @fileoverview Description of file, its uses and information
* about its dependencies.
* @author ***@***.com (Firstname Lastname)
* Copyright 2015 *** Inc. All Rights Reserved.
*/
