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 属性。
