Vue项⽬中的⽂件⽂件夹命名规范
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
中关于组件⽂件名的推荐：
的⽂件名应该要么始终是单词⼤写开头 (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命名风格
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论