Vue單檔案元件命名規範

2021-10-06 02:12:59 字數 1194 閱讀 6335

一直想寫一篇vue專案結構及元件內屬性 方法命名規範的部落格,今天終於騰出時間來寫了,也算是個人的總結;這篇部落格借鑑了另一篇部落格,值的推薦,個人也是在此基礎上加了一些個人的習慣用法;

views資料夾是所有檢視的檔案入口,包括所有的檢視以及檢視集合模組

views 下面的資料夾代表著模組的名字,一般由單個小寫名詞命名,以便與vue檔案區分,(good: car order cart bad: carinfo carpage)

views 下面的 vue 檔案代表著頁面的名字,只有乙個檔案的情況下直接放在資料夾之下,例如login home

以名詞命名,大寫開頭,開頭的單詞即所屬模組名字(cardetail、caredit、carlist)

常用結尾單詞有(detail、edit、list、info、report)

以 item 結尾的代表著頁面復用的元件(carlistitem、carinfoitem)

name

components

props

data

computed

methods

watch

filter

created mounted beforeupdate等常用的生命週期

beforerouteenter beforerouteupdate等元件內路由生命週期

剩下的不再列舉,根據個人習慣就好;個人建議狀態類屬性 函式類屬性作為兩個大的集合區分

ajax 方法以 get、post 開頭,以 data 結尾(**good:getlistdata、postformdata)(bad:takedata、confirmdata、getlist、postform)

事件方法以on 開頭(ontypechange、onusernameinput)

邏輯處理方法,語義化命名;handlesearch handleupdate

遵循駝峰命名法

使用 data 裡的變數時必須先在 data 裡面初始化props 指定type及預設值

個人建議用名詞與 _ 組合命名,例如xx_xx_xx,在管理state比較多時,省的苦思冥想那麼多命名

表單資料請包裹一層 form,在其中宣告每個表單域對應的命名即可

就是這些,有錯誤歡迎指正;

vue檔案命名規範

1 js檔案命名規範 屬於類的.js檔案,除index.js外,使用pascalbase風格 其它型別的.js檔案,使用kebab case風格 屬於api的,統一加上api字尾 2 vue檔案命名規範 除index.vue之外,其它.vue檔案統一用pascalbase風格 3 scss css ...

vue 單檔案元件

vue.js自定義的一種檔案格式 vue檔案,稱為單檔案元件,就是將html css js封裝在同乙個檔案內,從而實現了對乙個元件的封裝,乙個.vue 檔案就是乙個單獨的元件。1 編寫單檔案元件 vue結尾的檔案 由3部分組成 html template css style js script ht...

vue單檔案元件

vue單檔案元件 vue單檔案元件就是把乙個頁面拆分成為多個 多層次的元件。通過多層引用,大大縮小vue檔案的長度和頁面複雜度。步驟 父元件 1.引入元件 import tabcard from components tabcard.vue 2.配置元件 export default 3.使用元件 ...