【vue中文件及文件夹命名规范详细介绍】

24 篇文章 0 订阅
17 篇文章 0 订阅
本文详细介绍了Vue项目中文件、文件夹、组件、路由、测试文件的命名规范,强调了命名一致性的重要性,包括驼峰式、kebab-case和帕斯卡命名法的应用。
摘要由CSDN通过智能技术生成

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、为什么有lessCSS 是一门非程序式语言,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.jsUserCard.test.js

7. 约定性书写

  • 大型项目: 对于大型项目,有时可能需要在文件名中添加更多上下文,例如 UserCardPopup.vueUserCardForm.vue 等,以区分项目中的不同类型的组件。

  • 多单词组件名称: Vue 官方风格指南推荐,组件名称应该始终是多单词的,以防止与现有和未来的 HTML 元素冲突,例如使用 UserProfile 而不是 Profile

记住,最重要的是项目内部的一致性,选择一种风格,并贯穿整个项目,同时,如果你加入已存在的项目,遵循项目现有的命名约定也同样重要,如果需要,可以在项目初期制定好命名规范,确保所有团队成员都遵循相同的规则。

  • 28
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
创建文件夹文件列表功能是常见的文件管理功能,可以通过Vue框架来实现。 首先,我们需要在Vue组件定义一个文件夹文件列表的数据结构,可以使用数组来存储。例如: ``` data() { return { folders: [ { name: 'Folder 1', files: [] }, { name: 'Folder 2', files: [] } ], currentFolderIndex: 0 // 当前文件夹的索引 } } ``` 上面的代码定义了一个包含两个文件夹的数组,每个文件夹包含一个名称和一个空的文件列表。还定义了一个currentFolderIndex变量,用于记录当前选文件夹的索引。 接下来,我们可以定义两个方法来实现创建文件夹文件的功能。例如: ``` methods: { addFolder() { const folderName = prompt('请输入文件夹名称', 'New Folder') if (folderName) { this.folders.push({ name: folderName, files: [] }) } }, addFile() { const fileName = prompt('请输入文件名称', 'New File') if (fileName) { const currentFolder = this.folders[this.currentFolderIndex] currentFolder.files.push(fileName) } } } ``` 上面的代码,addFolder方法用于创建文件夹,通过prompt弹出一个对话框获取用户输入的文件夹名称,并将新的文件夹对象添加到folders数组。addFile方法用于创建文件,同样通过prompt弹出对话框获取文件名,并将文件名添加到当前文件夹文件列表。 最后,我们可以在Vue组件的模板使用v-for指令来展示文件夹文件列表。例如: ``` <template> <div> <button @click="addFolder">创建文件夹</button> <button @click="addFile">创建文件</button> <ul> <li v-for="(folder, index) in folders" :key="index"> {{ folder.name }} <ul> <li v-for="(file, index) in folder.files" :key="index"> {{ file }} </li> </ul> </li> </ul> </div> </template> ``` 上面的代码,我们使用v-for指令分别循环展示文件夹文件列表。可以看到,我们通过绑定的数据来展示文件夹文件列表,当数据发生变化时,UI会自动更新。 通过上面的步骤,我们就可以实现Vue的创建文件夹文件列表功能了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员不想YY啊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值