一、目录结构
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-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.
*/