前端工程项目(Vue项目为例)目录文件命名规范（个人推荐）

常见的命名规范：

• camelCase（小驼峰式命名法 —— 首字母小写）
• PascalCase（大驼峰式命名法 —— 首字母大写）
• kebab-case（短横线连接式）
• Snake（下划线连接式）

总体原则：尽量使用一个英文单词命名，实在无法一个单词表述才根据以下情况使用以上几种方式拼接多个单词命名。

1、项目工程名

全部采用小写方式，以短横线分隔。例：hello-world、wechat-client。

2、目录和文件夹

全部采用小写方式，以短横线分隔，有复数结构时使用复数形式。例：views、styles、error-log、history-list。

3、图片、音视频文件

全部采用小写方式，优先选择单个单词命名，多个单词命名以下划线分隔。例：error_icon.png、logo.gif、background_music.mp3。

4、html文件

全部采用小写方式，优先选择单个单词命名，多个单词命名短横线分隔。例：index.html、hello-world.html。

5、js文件、ts文件

全部采用小写方式，优先选择单个单词命名，多个单词命名以短横线分隔。例：wx-config.js、request.js、design-pattern.ts、axios.d.ts。

6、css文件、scss文件、less文件

全部采用小写方式，优先选择单个单词命名，多个单词命名以短横线分隔。例：person-setting.css、mixin.scss、vant-ui.less。

7、vue文件

文件扩展名为 .vue 的 single-file components (单文件组件)。

（1）作为组件使用时（/components目录下）：单文件组件名应该使用大驼峰式命名 (PascalCase)。例：BackToTop.vue、MarkdownEditor.vue、BusinessTag.vue。

         vue组件使用大驼峰式命名的原因：组件注册 | Vue.js

         注意：Windows文件系统是不区分大小写的，而Linux区分，曾经发生：文件名小写，本地开发环境运行和打包都没问题，在CI上打包会报错找不到文件，使用大驼峰命名和引入文件时必须仔细区分好大小写。

（2）作为路由页面使用时（/views目录下）：单文件组件名应该使用小写字母加短横线连接式命名 (kebab-case)。例：person-manage.vue、new-information/index.vue、new-information/detail.vue。

8、示例