template 模块
1.标签上不要写多余的属性(默认就是以 html 来解析)
<!-- Not recommended --> <template></template>
<!-- Recommended --> <template></template>
2. template 里 html 标签上的属性书写规则
2.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="请输入验证码" />
script 模块
1. import 放在最顶部,并省略掉 .js,.json 和 .vue 后缀(已在webpack的resolve.extensions中做了配置)
<!-- Not recommended --> import mockData from '@/mockdata/userMock.js'
<!-- Recommended --> import mockData from '@/mockdata/userMock'
2. export 对象中属性定义顺序
name 当前模块名字
components 便于查找引用了哪些组件(单个换行,以,结尾)
<!-- Recommended --> components: { norecord, TimePicker, },
props 可接受的从父组件传递过来的参数列表
props 值必须为对象;
如果是必传项,要设置 required:true;
如果有默认值(最好都有默认值),要设置 default 的值;
为 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 方法
方法按页面结构从上至下开始定义;
属于某一个功能项的尽量放在一起,并加上此功能项的起止注释;
页面初始化方法写在最后;
公用方法写在页面初始化方法前,页面其他功能项方法后;
<!-- Recommended --> methods: { // 添加课程 addClass() { }, // 删除课程 delClass() { }, /** 上传模块的功能 start */ // 上传成功 uploadSuc() { }, // 上传失败 uploadFail() { }, /** 上传模块的功能 end */ /** 共用方法 start */ // 转换成树结构 convertToTree() { }, // 表单校验 checkForm() { }, /** 共用方法 end */ // 初始化一些信息 init() { }, },
created/mounted/updated 等各类生命周期函数
<!-- Recommended --> methods: { }, /** 生命周期勾子函数 start */ beforeCreated() { }, created() { }, mounted() { }, /** 生命周期勾子函数 end */
style 模块
@import 写在最前;
样式书写顺序与页面结构一致;
嵌套层级最多请不要超过3层;
慎重考虑是否添加 scoped 属性。