我的vue项目编码规范

1、组件/实例的选项顺序（同步官方）。官方链接

这是我们推荐的组件选项默认顺序。它们被划分为几大类，所以你也能知道从插件里添加的新 property 应该放到哪里。

  1. 副作用 (触发组件外的影响)
    • el
  2. 全局感知 (要求组件以外的知识)
    • name
    • parent
  3. 组件类型 (更改组件的类型)
    • functional
  4. 模板修改器 (改变模板的编译方式)
    • delimiters
    • comments
  5. 模板依赖 (模板内使用的资源)
    • components
    • directives
    • filters
  6. 组合 (向选项里合并 property)
    • extends
    • mixins
  7. 接口 (组件的接口)
    • inheritAttrs
    • model
    • props/propsData
  8. 本地状态 (本地的响应式 property)
    • data
    • computed
  9. 事件 (通过响应式事件触发的回调)
    • watch
    • 生命周期钩子 (按照它们被调用的顺序)
      • beforeCreate
      • created
      • beforeMount
      • mounted
      • beforeUpdate
      • updated
      • activated
      • deactivated
      • beforeDestroy
      • destroyed
  10. 非响应式的 property (不依赖响应系统的实例 property)
    • methods
  11. 渲染 (组件输出的声明式描述)
    • 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 和指令应该放到哪里。

  1. 定义 (提供组件的选项)
    • is
  2. 列表渲染 (创建多个变化的相同元素)
    • v-for
  3. 条件渲染 (元素是否渲染/显示)
    • v-if
    • v-else-if
    • v-else
    • v-show
    • v-cloak
  4. 渲染方式 (改变元素的渲染方式)
    • v-pre
    • v-once
  5. 全局感知 (需要超越组件的知识)
    • id
  6. 唯一的 attribute (需要唯一值的 attribute)
    • ref
    • key
  7. 双向绑定 (把绑定和事件结合起来)
    • v-model
  8. 其它 attribute (所有普通的绑定或未绑定的 attribute)
  9. 事件 (组件事件监听器)
    • v-on
  10. 内容 (覆写元素的内容)
    • 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"
v-if="condition"
id=""
ref=""
:key=""
slot=""
v-model="something"
class=""
:class=""
style=""
:style=""
:Parent="" //父组件向子组件传值
v-on:event="handle"
>

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解决就行了

posted @ 2020-08-24 18:26  lqmrt  阅读(525)  评论(0)    收藏  举报