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