文件或文件夾的命名遵循以下原則：

1. index.js 或者 index.vue，統(tǒng)一使用小寫(xiě)字母開(kāi)頭的(kebab-case)命名規(guī)范
2. 屬于組件或類(lèi)的，統(tǒng)一使用大寫(xiě)字母開(kāi)頭的(PascalCase)命名規(guī)范
3. 其他非組件或類(lèi)的，統(tǒng)一使用小寫(xiě)字母開(kāi)頭的(kebab-case)命名規(guī)范

為什么

文件夾命名： camelCase VS kebab-case

• 展開(kāi)node_modules中的項(xiàng)目依賴(lài)，會(huì)發(fā)現(xiàn)，幾乎所有的項(xiàng)目文件夾命名都是 kebab-case命名的，使用kebab-case命名的文件夾比camelCase命名的文件夾看起來(lái)更清晰

組件命名：kebab-case VS PascalCase

vue的官方的風(fēng)格指南中關(guān)于組件文件名的推薦：

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

文件夾命名規(guī)范

屬于components文件夾下的子文件夾，使用大寫(xiě)字母開(kāi)頭的PascalBase風(fēng)格

• 全局通用的組件放在 /src/components下
• 其他業(yè)務(wù)頁(yè)面中的組件，放在各自頁(yè)面下的 ./components文件夾下
• 每個(gè)components文件夾下最多只有一層文件夾，且文件夾名稱(chēng)為組件的名稱(chēng)，文件夾下必須有index.vue或
  index.js，其他.vue文件統(tǒng)一大寫(xiě)開(kāi)頭（Pascal case），components下的子文件夾名稱(chēng)統(tǒng)一大寫(xiě)開(kāi)頭（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 { default as AppMain } from './AppMain'
export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar'

看index.js中最后一行代碼，不難發(fā)現(xiàn)，為什么components下的子文件夾要使用PascalCase命名：

export { default as Sidebar } from './sidebar' // 使用kebab-case命名的文件夾
export { default as Sidebar } from './Sidebar' // 使用 PascalCase命名的文件夾

• 對(duì)于組件的導(dǎo)出/導(dǎo)入，我們一般都是使用大寫(xiě)字母開(kāi)頭的PascalCase風(fēng)格，以區(qū)別于.vue組件內(nèi)部的其他camelCase聲明的變量，[Sidebar]作為【側(cè)邊欄組件】的一個(gè)整體被導(dǎo)出
• 文件夾的命名也采用PascalCase，有利于index.js中export時(shí)的前后統(tǒng)一，避免很多情況下不注意區(qū)分大小寫(xiě)

文件命名規(guī)范

*.js文件命名規(guī)范

• 屬于類(lèi)的.js文件，除index.js外，使用PascalBase風(fēng)格
• 其他類(lèi)型的.js文件，使用kebab-case風(fēng)格
• 屬于A(yíng)pi的，統(tǒng)一加上Api后綴

*.vue文件命名規(guī)范

• 除index.vue之外，其他.vue文件統(tǒng)一用kebab-case風(fēng)格

*.less *.scss等文件命名規(guī)范

• 統(tǒng)一使用kebab-case命名風(fēng)格

總結(jié)

以下為個(gè)人推薦

• 文件夾第一層有index命名的文件
• 普通文件夾推薦使用kebab-case風(fēng)格
• 組件文件夾/文件推薦使用PascalBase風(fēng)格
• js類(lèi)文件推薦使用PascalBase風(fēng)格
• 其他文件推薦使用kebab-case風(fēng)格