前言

自古中國取名文化博大進(jìn)深,往往取一個(gè)好的名字而絞盡腦汁.那么一個(gè)好名字能夠帶來什么呢?

名字的內(nèi)涵必需和使用者固有的本性相配套

不和名人重名、不易重名、創(chuàng)意新穎，真正體現(xiàn)通過名字以區(qū)分人的作用

響亮上口讀起來流暢好聽，協(xié)音美好，因?yàn)槁曇艉馔瑯佑绊懭?#xff0c;對人也有條件反射

易寫易記錄忌諱筆畫過于繁索

在程序中的命名又何嘗不是呢?

組件的命名和它的功能相配套

不與其他業(yè)務(wù)組件重名,讓人一眼就區(qū)分

不一定要好聽酷炫,但是實(shí)用.讓開發(fā)者產(chǎn)生條件反射,看到命名就會想到這個(gè)組件的實(shí)用場景

易寫易記,短小卻精煉,不繁瑣

單文件組件的大小寫

單文件組件要么始終以大寫字母開頭(PascalCase)要么始終用-連接(kebab-case)單詞大寫開頭對于代碼編輯器的自動補(bǔ)全最為友好，因?yàn)檫@使得我們在 JS(X) 和模板中引用組件的方式盡可能的一致。然而，混用文件命名方式有的時(shí)候會導(dǎo)致大小寫不敏感的文件系統(tǒng)的問題，這也是橫線連接命名同樣完全可取的原因。

基礎(chǔ)組件命名

應(yīng)用特定樣式和約定的基礎(chǔ)組件 (也就是展示類的、無邏輯的或無狀態(tài)的組件) 應(yīng)該全部以一個(gè)特定的前綴開頭，比如 Base、App 或 V。

**反例**components/|- button.vue|- loading.vue|- slide.vue 復(fù)制代碼**正例**components/|- BaseButton.vue|- BaseLoading.vue|- BaseSlide.vue 復(fù)制代碼

單個(gè)活躍實(shí)例的組件

單個(gè)活躍實(shí)例的組件應(yīng)該以 The 前綴命名,以示其唯一性
這不意味著組件只可用于一個(gè)單頁面，而是每個(gè)頁面只使用一次。這些組件永遠(yuǎn)不接受任何 prop，因?yàn)樗鼈兪菫槟愕膽?yīng)用定制的，而不是它們在你的應(yīng)用中的上下文。如果你發(fā)現(xiàn)有必要添加 prop，那就表明這實(shí)際上是一個(gè)可復(fù)用的組件，只是目前在每個(gè)頁面里只使用一次。

**反例**components/|- SaleManage.vue|- ImportExcel.vue 復(fù)制代碼**正例**components/|- TheSaleManage.vue|- TheImportExcel.vue 復(fù)制代碼

緊密耦合的組件名

和父組件緊密耦合的子組件應(yīng)該以父組件的命名為前綴.如果一個(gè)組件只在其父組件某個(gè)場景下有意義,這層關(guān)系應(yīng)該體現(xiàn)在組件名上,因?yàn)榫庉嬈魍ǔ０凑帐鬃帜疙樞蚪M織文件.

**反例**components/|- SearchBox.vue|- SearchItem.vue|- SearchButton.vue 復(fù)制代碼**正例**components/|- SearchBox.vue|- SearchBoxItem.vue|- SearchBoxButton.vue 復(fù)制代碼

組件命中的單詞順序

組件名應(yīng)該以高級別的 (通常是一般化描述的) 單詞開頭，以描述性的修飾詞結(jié)尾。

**反例**components/|- ClearSearchButton.vue|- ExcludeFromSearchInput.vue|- LaunchOnStartupCheckbox.vue|- RunSearchButton.vue|- SearchInput.vue|- TermsCheckbox.vue 復(fù)制代碼**正例**components/|- SearchButtonClear.vue|- SearchButtonRun.vue|- SearchInputQuery.vue|- SearchInputExcludeGlob.vue|- SettingsCheckboxTerms.vue|- SettingsCheckboxLaunchOnStartup.vue 復(fù)制代碼

完整單詞的組件名

編輯器中的自動補(bǔ)全已經(jīng)相當(dāng)友好,讓書寫長的組件名的代價(jià)已經(jīng)可以微乎其微,同樣的效率更易于理解,何樂而不為?

**反例**components/|- soManage.vue|- woManage.vue 復(fù)制代碼**正例**components/|- SaleOrderManage.vue|- WorkOrderManage.vue 復(fù)制代碼

prop的大小寫

在聲明時(shí)始終采用(camelCase),在模板和 JSX 中應(yīng)該始終使用( kebab-case)。
單純的遵循每個(gè)語言的約定。在 JavaScript 中更自然的是 camelCase。而在 HTML 中則是 kebab-case。

**反例** props: {'greeting-text': String } <WelcomeMessage greetingText="hi"/> 復(fù)制代碼**正例** props: {greetingText: String } <WelcomeMessage greeting-text="hi"/> 復(fù)制代碼

總結(jié)

以上是生活随笔為你收集整理的vue组件命名指南,不为取名而纠结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。