Vue項目中的文件/文件夾命名規范

0.2262018.09.21 16:01:09字數 820閱讀 6979

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

• index.js 或者 index.vue，統一使用小寫字母開頭的(kebab-case)命名規范
• 屬於組件或類的，統一使用大寫字母開頭的(PascalCase)命名規范
• 其他非組件或類的，統一使用小寫字母開頭的(kebab-case)命名規范

1. Why？

文件夾命名： camelCase VS kebab-case

展開node_modules中的項目依賴，會發現，幾乎所有的項目文件夾命名都是 kebab-case命名的，使用kebab-case命名的文件夾比camelCase命名的文件夾看起來更清晰

組件命名：kebab-case VS PascalCase

vue的官方的風格指南中關於組件文件名的推薦：

單文件組件文件的大小寫強烈推薦

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

2. 文件夾命名規范

屬於components文件夾下的子文件夾，使用大寫字母開頭的PascalBase風格

1. 全局通用的組件放在 /src/components下
2. 其他業務頁面中的組件，放在各自頁面下的 ./components文件夾下
3. 每個components文件夾下最多只有一層文件夾，且文件夾名稱為組件的名稱，文件夾下必須有index.vue或
   index.js，其他.vue文件統一大寫開頭（Pascal case），components下的子文件夾名稱統一大寫開頭（PascalCase）

其他文件夾統一使用kebab-case的風格

全局公共組件：/src/components示例

  - [components]
    - [Breadcrumb]
      - index.vue
    - [Hamburger]
      - index.vue
    - [SvgIcon]
      - index.vue

業務頁面內部封裝的組件：以 /src/views/layout/components示例

-[src]
  - [views]
    - [layout]
      - [components]
        - [Sidebar]
          - index.vue
          - Item.vue
          - SidebarItem.vue
        - AppMain.vue
        - index.js
        - Navbar.vue`

index.js 中導出組件方式如下：

export { default as AppMain } from './AppMain' export { default as Navbar } from './Navbar' export { default as Sidebar } from './Sidebar' 

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

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

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

3. 文件命名規范

3.1. *.js文件命名規范

1. 屬於類的.js文件，除index.js外，使用PascalBase風格
2. 其他類型的.js文件，使用kebab-case風格
3. 屬於Api的，統一加上Api后綴

3.2. *.vue文件命名規范

除index.vue之外，其他.vue文件統一用PascalBase風格

3.3. *.less文件命名規范

統一使用kebab-case命名風格