1、组件/实例的选项顺序(同步官方)。官方链接
这是我们推荐的组件选项默认顺序。它们被划分为几大类,所以你也能知道从插件里添加的新 property 应该放到哪里。
- 副作用 (触发组件外的影响)
- el
- 全局感知 (要求组件以外的知识)
- name
- parent
- 组件类型 (更改组件的类型)
- functional
- 模板修改器 (改变模板的编译方式)
- delimiters
- comments
- 模板依赖 (模板内使用的资源)
- components
- directives
- filters
- 组合 (向选项里合并 property)
- extends
- mixins
- 接口 (组件的接口)
- inheritAttrs
- model
- props/propsData
- 本地状态 (本地的响应式 property)
- data
- computed
- 事件 (通过响应式事件触发的回调)
- watch
- 生命周期钩子 (按照它们被调用的顺序)
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- activated
- deactivated
- beforeDestroy
- destroyed
- 非响应式的 property (不依赖响应系统的实例 property)
- methods
- 渲染 (组件输出的声明式描述)
- template/render
- renderError
因此实际开发过程中用得比较多的选项顺序如下
export default {
name: 'demo',
components: {},
directives: {},
filters: {},
extends: Object,
mixins: [],
props: {},
data() {
return {
}
},
computed: {},
watch: {},
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
activated() {},
deactivated() {},
beforeDestroy() {},
destroyed() {},
methods() {}
}
2、元素 (包括组件) 的 attribute 应该有统一的顺序(同步官方)。官方
这是我们为组件选项推荐的默认顺序。它们被划分为几大类,所以你也能知道新添加的自定义 attribute 和指令应该放到哪里。
- 定义 (提供组件的选项)
- is
- 列表渲染 (创建多个变化的相同元素)
- v-for
- 条件渲染 (元素是否渲染/显示)
- v-if
- v-else-if
- v-else
- v-show
- v-cloak
- 渲染方式 (改变元素的渲染方式)
- v-pre
- v-once
- 全局感知 (需要超越组件的知识)
- id
- 唯一的 attribute (需要唯一值的 attribute)
- ref
- key
- 双向绑定 (把绑定和事件结合起来)
- v-model
- 其它 attribute (所有普通的绑定或未绑定的 attribute)
- 事件 (组件事件监听器)
- v-on
- 内容 (覆写元素的内容)
- v-html
- v-text
因此实际开发过程中用得比较多的元素特征顺序如下
- v-for
- v-if/v-show
- id
- ref/key/slot
- v-model
- class/:class/style/:style
- v-on
<div(组件同理)
v-for="(item, index) in items"
:key="index"
v-if="condition"
id=""
ref=""
key=""
slot=""
v-model="something"
class=""
:class=""
style=""
:style=""
v-on:event="handle"
></div>
3、css样式书写规范(参照官网以及某大公司的规范)
1、首先我们为CSS类命名时应使用lowercase-hyphenated
2、[建议] border / margin/ padding等缩写会同时设置多个属性的值,容易覆盖不需要覆盖的设定。如某些方向需要继承其他声明的值,则应该分开设置。
3、属性书写顺序
[建议] 同一 rule set 下的属性在书写时,应按功能进行分组,并以 Formatting Model(布局方式、位置) > Box Model(尺寸) > Typographic(文本相关) > Visual(视觉效果) 的顺序书写,以提高代码的可读性。
解释:
- Formatting Model 相关属性包括:position / top / right / bottom / left / float / display / overflow 等
- Box Model 相关属性包括:border / margin / padding / width / height 等
- Typographic 相关属性包括:font / line-height / text-align / word-wrap 等
- Visual 相关属性包括:background / color / transition / list-style 等
另外,如果包含 content 属性,应放在最前面。
示例:
.sidebar {
/* formatting model: positioning schemes / offsets / z-indexes / display / ... */
position: absolute;
top: 50px;
left: 0;
overflow-x: hidden;
/* box model: sizes / margins / paddings / borders / ... */
width: 200px;
padding: 5px;
border: 1px solid #ddd;
/* typographic: font / aligns / text styles / ... */
font-size: 14px;
line-height: 20px;
/* visual: colors / shadows / gradients / ... */
background: #f5f5f5;
color: #333;
-webkit-transition: color 1s;
-moz-transition: color 1s;
transition: color 1s;
}
4 、清除浮动
[建议] 当元素需要撑起高度以包含内部的浮动元素时,通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。
5、 !important
[建议] 尽量不使用 !important 声明。
[建议] 当需要强制指定样式且不允许任何场景覆盖时,通过标签内联和 !important 定义样式。
6、数值
[强制] 当数值为 0 - 1 之间的小数时,省略整数部分的 0。
7、长度
[强制] 长度为 0 时须省略单位。 (也只有长度单位可省)
8 、颜色
[强制] RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。
[强制] 颜色值可以缩写时,必须使用缩写形式。
[强制] 颜色值不允许使用命名色值。
[建议] 颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。
示例:
/* good */
.success {
background-color: #aca;
color: #90ee90;
}
/* good */
.success {
background-color: #ACA;
color: #90EE90;
}
/* bad */
.success {
background-color: #ACA;
color: #90ee90;
}
9、字体
[强制] 需要在 Windows 平台显示的中文内容,其字号应不小于 12px。
解释:
由于 Windows 的字体渲染机制,小于 12px 的文字显示效果极差、难以辨认。
[强制] font-weight 属性必须使用数值方式描述。
解释:
CSS 的字重分 100 – 900 共九档,但目前受字体本身质量和浏览器的限制,实际上支持 400 和 700 两档,分别等价于关键词 normal 和 bold。
浏览器本身使用一系列启发式规则来进行匹配,在 <700 时一般匹配字体的 Regular 字重,>=700 时匹配 Bold 字重。
但已有浏览器开始支持 =600 时匹配 Semibold 字重 (见此表),故使用数值描述增加了灵活性,也更简短。
/* good */
h1 {
font-weight: 700;
}
/* bad */
h1 {
font-weight: bold;
}
[建议] line-height 在定义文本段落时,应使用数值。
解释:
将 line-height 设置为数值,浏览器会基于当前元素设置的 font-size 进行再次计算。在不同字号的文本段落组合中,能达到较为舒适的行间间隔效果,避免在每个设置了 font-size 都需要设置 line-height。
当 line-height 用于控制垂直居中时,还是应该设置成与容器高度一致。
10、变换与动画
[强制] 使用 transition 时应指定 transition-property。
示例:
/* good */
.box {
transition: color 1s, border-color 1s;
}
/* bad */
.box {
transition: all 1s;
}
至于其他的缩进规则以及js书写规范及美化我们交给交给格式化文档工具vetur插件以及eslint解决就行了