template 模塊
1.標簽上不要寫多余的屬性(默認就是以 html 來解析)
<!-- Not recommended --> <template></template>
<!-- Recommended --> <template></template>
2. template 里 html 標簽上的屬性書寫規(guī)則
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 可接受的從父組件傳遞過來的參數(shù)列表
props 值必須為對象;
如果是必傳項,要設置 required:true;
如果有默認值(最好都有默認值),要設置 default 的值;
為 props 的每個字段添加注釋,方便后期維護
<!-- Recommended --> props: { // 學生數(shù)量 stuCount: Number, // 是否正在加載(帶有默認值) isLoading: { type: Boolean, default: false, }, // 是否正在創(chuàng)建(如果是必傳項) isCreating: { type: Boolean, required: true, default: false, }, },
data 記得是一個 function,保證每個實例可以維護一份被返回對象的獨立的拷貝
computed 計算屬性
watch 監(jiān)聽器
filters 過濾器
directives 指令
mixins 混入
methods 方法
方法按頁面結構從上至下開始定義;
屬于某一個功能項的盡量放在一起,并加上此功能項的起止注釋;
頁面初始化方法寫在最后;
公用方法寫在頁面初始化方法前,頁面其他功能項方法后;
<!-- Recommended --> methods: { // 添加課程 addClass() { }, // 刪除課程 delClass() { }, /** 上傳模塊的功能 start */ // 上傳成功 uploadSuc() { }, // 上傳失敗 uploadFail() { }, /** 上傳模塊的功能 end */ /** 共用方法 start */ // 轉(zhuǎn)換成樹結構 convertToTree() { }, // 表單校驗 checkForm() { }, /** 共用方法 end */ // 初始化一些信息 init() { }, },
created/mounted/updated 等各類生命周期函數(shù)
<!-- Recommended --> methods: { }, /** 生命周期勾子函數(shù) start */ beforeCreated() { }, created() { }, mounted() { }, /** 生命周期勾子函數(shù) end */
style 模塊
@import 寫在最前;
樣式書寫順序與頁面結構一致;
嵌套層級最多請不要超過3層;
慎重考慮是否添加 scoped 屬性。