vue元件命名風格

2021-10-04 11:40:33 字數 1400 閱讀 3319

單檔案元件的檔名應該要麼始終是單詞大寫開頭 (pascalcase),要麼始終是橫線連線 (kebab-case)。

單詞大寫開頭對於**編輯器的自動補全最為友好,因為這使得我們在 js(x) 和模板中引用元件的方式盡可能的一致。然而,混用檔案命名方式有的時候會導致大小寫不敏感的檔案系統的問題,這也是橫線連線命名同樣完全可取的原因

反例

components/

|- mycomponent.vue

components/

|- mycomponent.vue

好例子

components/

|- mycomponent.vue

components/

|- my-component.vue

js中命名

import headerbar from "./components/headerbar";

export default ,

html 中使用

js中命名

import footbar from "./components/footbar";

export default ,

html中使用

js中命名

import footbar from "./components/footbar";

export default ,

html中使用

這些元件為你的應用奠定了一致的基礎樣式和行為。它們可能包括:

但是它們絕不會包括全域性狀態 (比如來自 vuex store)。

它們的名字通常包含所包裹元素的名字 (比如basebuttonbasetable),除非沒有現成的對應功能的元素 (比如baseicon)。如果你為特定的上下文構建類似的元件,那它們幾乎總會消費這些元件 (比如basebutton可能會用在buttonsubmit上)。

這樣做的幾個好處:

components/

|- basebutton.vue

|- basetable.vue

|- baseicon.vue

components/
components/

|- vbutton.vue

|- vtable.vue

|- vicon.vue

vue專案檔案命名風格指南

使用vue cli工程化開發專案時,會需要建立許多的檔案,如何統一命名需要遵循一定的規範 所有的component檔案都是以大寫開頭 pascalcase 這也是官方所推薦的。但除了index.vue。例子 所有的.js檔案都遵循橫線連線 kebab case 例子 在views檔案下,代表路由的....

VUE學習之元件命名問題

想寫乙個驗證props 屬性的簡單小例子,但寫到元件的時候就出錯了。錯誤 如下 不能再簡單了。問題出在元件名稱 inputview上。網上搜尋到的解釋如下 在dom中直接呼叫元件 上面 就是此種方式 呼叫元件的元素全部會被全部解析為小寫字母,比如會被解析為,然後去匹配元件名,匹配元件名順序是 hel...

71Vue 元件命名約定

當註冊元件 或者 props 時,可以使用 kebab case camelcase 或 titlecase vue 不關心這個。在元件定義中 components camelcasedcomponent titlecasedcomponent 在 html 模版中,請使用 kebab case 形...