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

• 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中的項目依賴，會發(fā)現(xiàn)，幾乎所有的項目文件夾命名都是 kebab-case命名的，使用kebab-case命名的文件夾比camelCase命名的文件夾看起來更清晰

組件命名：kebab-case VS PascalCase

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

單文件組件文件的大小寫^{強(qiáng)烈推薦}

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

2. 文件夾命名規(guī)范

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

1. 全局通用的組件放在 /src/components下
2. 其他業(yè)務(wù)頁面中的組件，放在各自頁面下的 ./components文件夾下
3. 每個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ù)頁面內(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命名的文件夾

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

3. 文件命名規(guī)范

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

1. 屬于類的.js文件，除index.js外，使用PascalBase風(fēng)格
2. 其他類型的.js文件，使用kebab-case風(fēng)格
3. 屬于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)格