Vue学习笔记之Vue文件书写规范

0x00 概述

本文转载，原文

 

0x01 template模块

1.1 <template> 标签上不要写多余的属性（默认就是以 html 来解析）

<!-- Not recommended -->
<template lang="html"></template>

<!-- Recommended -->
<template></template>

1.2 template 里 html 标签上的属性书写规则

1.2.1 超过一个属性时，属性换行对齐；

1.2.2 v-xx指令放最前，自有属性放最后；

<!-- Not recommended -->
<input type="text" class="hf-input" placeholder="请输入验证码" v-model="form.imageCode" />

<!-- Recommended -->
<input
  v-model="form.imageCode"
  type="text"
  class="hf-input"
  placeholder="请输入验证码"
/>

1.2.3 v-xx指令排序规则，控制显示 -> 控制循环 -> v-bind属性 -> v-on事件绑定；

v-if / v-show -> v-for -> v-bind:text... -> v-on:click...

<!-- Recommended -->
<ul v-if="todos.length > 0">
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>

1.2.4  当v-if与v-for在同一个标签上时，记得v-if的权重高于v-for，会在每个标签上做判断，确定这是你真正的意图？

1.2.5 v-for时，记得为每项提供一个唯一 <key> 属性；

1.2.6 非不得已，请不要写html标签上直接写style内联样式！

1.3 在大结构块时，加入合适的注释标签，并保持良好的层级缩进；

<div>
  <!-- “导入”组件 -->
  <div>
    xxx
  </div>
  <!-- “导入”组件/ -->
  <!-- 搜索框 -->
  <div>
     xxx
  </div>
  <!-- 搜索框/ -->
</div>

 

0x02 script模块

2.1 import 放在最顶部，并省略掉 .js，.json 和 .vue 后缀（已在webpack的resolve.extensions中做了配置）

<!-- Not recommended -->
import mockData from '@/mockdata/userMock.js'

<!-- Recommended -->
import mockData from '@/mockdata/userMock'

2.2 export 对象中属性定义顺序

name 当前模块名字
components 便于查找引用了哪些组件（单个换行，以,结尾）

<!-- Recommended -->
components: {
  norecord,
  TimePicker,
},

 props 可接受的从父组件传递过来的参数列表

1. props 值必须为对象；
2. 如果是必传项，要设置 required:true；
3. 如果有默认值（最好都有默认值），要设置 default 的值；
4. 为 props 的每个字段添加注释，方便后期维护

<!-- Recommended -->
props: {
  // 学生数量
  stuCount: Number,
  // 是否正在加载（带有默认值）
  isLoading: {
    type: Boolean,
    default: false,
  },
  // 是否正在创建（如果是必传项）
  isCreating: {
    type: Boolean,
    required: true,
    default: false,
  },
},

<!--

data 记得是一个 function，保证每个实例可以维护一份被返回对象的独立的拷贝
computed 计算属性
watch 监听器
filters 过滤器
directives 指令
mixins 混入
methods 方法

-->

1. 方法按页面结构从上至下开始定义；
2. 属于某一个功能项的尽量放在一起，并加上此功能项的起止注释；
3. 页面初始化方法写在最后；
4. 公用方法写在页面初始化方法前，页面其他功能项方法后；

<!-- Recommended -->
methods: {
    // 添加课程
    addClass() {

    },
    // 删除课程
    delClass() {

    },

    /** 上传模块的功能 start */
    // 上传成功
    uploadSuc() {

    },
    // 上传失败
    uploadFail() {
        
    }, 
    /** 上传模块的功能 end */

    /** 共用方法 start */
    // 转换成树结构
    convertToTree() {

    },
    // 表单校验
    checkForm() {

    },
    /** 共用方法 end */

    // 初始化一些信息
    init() {

    },
},

 created/mounted/updated 等各类生命周期函数

<!-- Recommended -->
methods: {
    
},
/** 生命周期勾子函数 start */
beforeCreated() {

},
created() {

},
mounted() {

},
/** 生命周期勾子函数 end */

 

0x03 style模块

1. @import 写在最前；
2. 样式书写顺序与页面结构一致；
3. 嵌套层级最多请不要超过3层；
4. 慎重考虑是否添加 scoped 属性。