我的vue项目编码规范

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"
  v-if="condition"
  id=""
  ref=""
  :key=""
  slot=""
  v-model="something"
  class=""
  :class=""
  style=""
  :style=""
  :Parent="" //父组件向子组件传值
  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解决就行了

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

刷新页面返回顶部

lqmrt

我的vue项目编码规范

公告