網(wǎng)址：https://www.cnblogs.com/dongzhuangdian/p/9992542.html
文件或文件夾的命名遵循以下原則：
文件夾camelCase
單文件組件camelCase || kebab-case
變量camelCase || _隔開
template中的組件kebab-case
組件的name值camelCase
Vue 推薦文件夾、單文件組件、組件name值以PascalBase規(guī)則命名
index.js?或者?index.vue，統(tǒng)一使用小寫字母開頭的(kebab-case)命名規(guī)范
屬于組件或類的，統(tǒng)一使用大寫字母開頭的(PascalCase)命名規(guī)范
其他非組件或類的，統(tǒng)一使用小寫字母開頭的(kebab-case)命名規(guī)范
1. Why？
文件夾命名：?camelCase?VS?kebab-case
展開node_modules中的項(xiàng)目依賴，會(huì)發(fā)現(xiàn)，幾乎所有的項(xiàng)目文件夾命名都是?kebab-case命名的，使用kebab-case命名的文件夾比camelCase命名的文件夾看起來更清晰
組件命名：kebab-case?VS?PascalCase
vue的官方的風(fēng)格指南中關(guān)于組件文件名的推薦：
單文件組件的文件名應(yīng)該要么始終是單詞大寫開頭 (PascalCase)，要么始終是橫線連接 (kebab-case)。
單詞大寫開頭對(duì)于代碼編輯器的自動(dòng)補(bǔ)全最為友好，因?yàn)檫@使得我們?cè)?JS(X) 和模板中引用組件的方式盡可能的一致。然而，混用文件命名方式有的時(shí)候會(huì)導(dǎo)致大小寫不敏感的文件系統(tǒng)的問題，這也是橫線連接命名同樣完全可取的原因。
2. 文件夾命名規(guī)范
屬于components文件夾下的子文件夾，使用大寫字母開頭的PascalBase風(fēng)格
全局通用的組件放在 /src/components下
其他業(yè)務(wù)頁(yè)面中的組件，放在各自頁(yè)面下的 ./components文件夾下
每個(gè)components文件夾下最多只有一層文件夾，且文件夾名稱為組件的名稱，文件夾下必須有index.vue或
index.js，其他.vue文件統(tǒng)一大寫開頭（Pascal case），components下的子文件夾名稱統(tǒng)一大寫開頭（PascalCase）
其他文件夾統(tǒng)一使用kebab-case的風(fēng)格
全局公共組件：/src/components示例
-[components]-[Breadcrumb]-index.vue-[Hamburger]-index.vue-[SvgIcon]-index.vue
業(yè)務(wù)頁(yè)面內(nèi)部封裝的組件：以?/src/views/layout/components示例
-[src]-[views]-[layout]-[components]-[Sidebar]-index.vue-Item.vue-SidebarItem.vue-AppMain.vue-index.js-Navbar.vue`
index.js 中導(dǎo)出組件方式如下：
export{defaultasAppMain }from'./AppMain'export{defaultasNavbar }from'./Navbar'export{defaultasSidebar }from'./Sidebar'
看index.js中最后一行代碼，不難發(fā)現(xiàn)，為什么components下的子文件夾要使用PascalCase命名：
export{defaultasSidebar }from'./sidebar'// 使用kebab-case命名的文件夾export{defaultasSidebar }from'./Sidebar'// 使用 PascalCase命名的文件夾
對(duì)于組件的導(dǎo)出/導(dǎo)入，我們一般都是使用大寫字母開頭的PascalCase風(fēng)格，
以區(qū)別于.vue組件內(nèi)部的其他camelCase聲明的變量，
[Sidebar]作為【側(cè)邊欄組件】的一個(gè)整體被導(dǎo)出，文件夾的命名也采用PascalCase，
有利于index.js中export時(shí)的前后統(tǒng)一，避免很多情況下不注意區(qū)分大小寫
3. 文件命名規(guī)范
3.1.?*.js文件命名規(guī)范
屬于類的.js文件，除index.js外，使用PascalBase風(fēng)格
其他類型的.js文件，使用kebab-case風(fēng)格
屬于Api的，統(tǒng)一加上Api后綴
3.2.?*.vue文件命名規(guī)范
除index.vue之外，其他.vue文件統(tǒng)一用PascalBase風(fēng)格
3.3.?*.less文件命名規(guī)范
統(tǒng)一使用kebab-case命名風(fēng)格
Vue 推薦文件夾、單文件組件、組件name值以PascalBase規(guī)則命名
