vue中文件及文件夹命名规范详细介绍
- 1. 介绍
- 2. 命名规范
- 3. 文件夹名
- 4. 路由和子文件夹
- 5. 单文件组件的大写字母
- 6. 测试文件
- 7. 约定性书写
1. 介绍
在 Vue 项目中,合理的文件和文件夹命名对于代码维护和团队协作非常重要,没有官方的强制性规范,但社区有一些通用的最佳实践:
2. 命名规范
Vue 组件的命名规范通常遵循以下几种风格:
-
1.
命名法
1.1 驼峰式命名法(camelCase)
1.2 短横线命名(kebab-case)全小写
1.3 帕斯卡命名法(PascalCase) -
2.
文件夹命名
2.1 kebab-case
2.2 尽量使用名词,尽量使用一个单词 -
3.
*.js文件命名规范
3.1 所有模块的主文件index.js全小写
3.2 属于组件的.js文件,使用PascalBase风格
3.3 其他类型的.js文件,使用kebab-case风格 -
4.
*.vue文件命名规范
4.1 除index.vue之外,其他.vue文件统一用PascalBase风格 -
5.
*.less文件命名规范
统一使用kebab-case命名风格
前三点比较重要,需要记住
附录一:.less
为后缀的文件是什么
1、less
是什么:LESS
为 Web 开发者带来了福音,它在 CSS
的语法基础之上,引入了变量,Mixin
(混入),运算以及函数等功能,大大简化了 CSS
的编写,并且降低了 CSS
的维护成本,就像它的名称所说的那样,LESS
可以让我们用更少的代码做更多的事情。
2、为什么有less
:CSS
是一门非程序式语言,CSS
需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用
3、less
最最最简单实例:使用@符号来定义变量
3. 文件夹名
文件夹名称通常遵循如下几种风格:
-
全小写并使用连字符分隔: 对于存放组件的文件夹,常见的是使用 kebab-case,如
user-profile
文件夹内部可能包含UserProfile.vue
和相关组件文件。 -
模块性和复用性: 将相关组件组织在同一个文件夹中,例如,你可能有一个
users
文件夹,它包含有关用户组件的所有东西。
4. 路由和子文件夹
如果项目中使用 Vue Router 并遵循路由的结构来组织代码,文件夹名称通常与路由路径一致。例如,对于路由 /users/list
,可以有一个名为 users
的文件夹,里面有一个名为 List.vue
的组件。
5. 单文件组件的大写字母
Vue 单文件组件(SFC)推荐使用帕斯卡命名法,文件内的 <script>
、<template>
和 <style>
标签中的代码,遵循其对应的 JavaScript、HTML 和 CSS 标准的命名规范。
6. 测试文件
测试文件的命名通常与它们正在测试的文件相匹配,并加上.spec
或.test
后缀。例如,UserCard.spec.js
或 UserCard.test.js
。
7. 约定性书写
-
大型项目: 对于大型项目,有时可能需要在文件名中添加更多上下文,例如
UserCardPopup.vue
或UserCardForm.vue
等,以区分项目中的不同类型的组件。 -
多单词组件名称: Vue 官方风格指南推荐,组件名称应该始终是多单词的,以防止与现有和未来的 HTML 元素冲突,例如使用
UserProfile
而不是Profile
。
记住,最重要的是项目内部的一致性,选择一种风格,并贯穿整个项目,同时,如果你加入已存在的项目,遵循项目现有的命名约定也同样重要,如果需要,可以在项目初期制定好命名规范,确保所有团队成员都遵循相同的规则。