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