template 模塊
1.標(biāo)簽上不要寫多余的屬性（默認(rèn)就是以 html 來(lái)解析）
<!-- Not recommended --> <template></template>
<!-- Recommended --> <template></template>
2. template 里 html 標(biāo)簽上的屬性書(shū)寫規(guī)則
2.1 超過(guò)一個(gè)屬性時(shí)，屬性換行對(duì)齊；
2.2 v-xx指令放最前，自有屬性放最后；
<!-- Not recommended --> <input type="text" class="hf-input" placeholder="請(qǐng)輸入驗(yàn)證碼" v-model="form.imageCode" />
<!-- Recommended --> <input v-model="form.imageCode" type="text" class="hf-input" placeholder="請(qǐng)輸入驗(yàn)證碼" />
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 對(duì)象中屬性定義順序
name 當(dāng)前模塊名字
components 便于查找引用了哪些組件（單個(gè)換行，以,結(jié)尾）
<!-- Recommended -->
components: {
norecord,
TimePicker,
},props 可接受的從父組件傳遞過(guò)來(lái)的參數(shù)列表
props 值必須為對(duì)象；
如果是必傳項(xiàng)，要設(shè)置 required:true；
如果有默認(rèn)值（最好都有默認(rèn)值），要設(shè)置 default 的值；
為 props 的每個(gè)字段添加注釋，方便后期維護(hù)
<!-- Recommended -->
props: {
// 學(xué)生數(shù)量
stuCount: Number,
// 是否正在加載（帶有默認(rèn)值）
isLoading: {
type: Boolean,
default: false,
},
// 是否正在創(chuàng)建（如果是必傳項(xiàng)）
isCreating: {
type: Boolean,
required: true,
default: false,
},
},data 記得是一個(gè) function，保證每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝
computed 計(jì)算屬性
watch 監(jiān)聽(tīng)器
filters 過(guò)濾器
directives 指令
mixins 混入
methods 方法
方法按頁(yè)面結(jié)構(gòu)從上至下開(kāi)始定義；
屬于某一個(gè)功能項(xiàng)的盡量放在一起，并加上此功能項(xiàng)的起止注釋；
頁(yè)面初始化方法寫在最后；
公用方法寫在頁(yè)面初始化方法前，頁(yè)面其他功能項(xiàng)方法后；
<!-- Recommended -->
methods: {
// 添加課程
addClass() {
},
// 刪除課程
delClass() {
},
/** 上傳模塊的功能 start */
// 上傳成功
uploadSuc() {
},
// 上傳失敗
uploadFail() {
},
/** 上傳模塊的功能 end */
/** 共用方法 start */
// 轉(zhuǎn)換成樹(shù)結(jié)構(gòu)
convertToTree() {
},
// 表單校驗(yàn)
checkForm() {
},
/** 共用方法 end */
// 初始化一些信息
init() {
},
},created/mounted/updated 等各類生命周期函數(shù)
<!-- Recommended -->
methods: {
},
/** 生命周期勾子函數(shù) start */
beforeCreated() {
},
created() {
},
mounted() {
},
/** 生命周期勾子函數(shù) end */style 模塊
@import 寫在最前；
樣式書(shū)寫順序與頁(yè)面結(jié)構(gòu)一致；
嵌套層級(jí)最多請(qǐng)不要超過(guò)3層；
慎重考慮是否添加 scoped 屬性。
