文件或文件夹的命名遵循以下原则:
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 风格
全局通用的组件放在 /src/components 下
其他业务页面中的组件, 放在各自页面下的 ./components 文件夹下
每个 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 文件命名规范
属于类的. JS 文件, 除 index.JS 外, 使用 PascalBase 风格
其他类型的. JS 文件, 使用 kebab-case 风格
属于 API 的, 统一加上 API 后缀
3.2. *.vue 文件命名规范
除 index.vue 之外, 其他. vue 文件统一用 PascalBase 风格
3.3. *.Less 文件命名规范
统一使用 kebab-case 命名风格
来源: http://www.bubuko.com/infodetail-2854844.html