前端通用命名规范和Vue项目命名规范

​​​​​​通用命名规范

  1. 变量和常量命名:变量和常量的命名应具有描述性,清晰明了,使用驼峰命名法或下划线命名法,例如:firstName、MAX_VALUE。

  2. 函数和方法命名:函数和方法的命名应该能够准确描述其功能,使用动词开头,使用驼峰命名法,例如:calculateSum()、getUserInfo()。

  3. 类和接口命名:类和接口的命名应具有描述性,使用名词或名词短语,使用驼峰命名法,例如:Person、OrderService。

  4. 包命名:包的命名应简洁明了,使用小写字母,多个单词之间使用点分隔符号,例如:com.example.project。

  5. 常见缩写和简写:避免使用过于晦涩的缩写,尽量使用常见的缩写和简写,例如:str(string)、num(number)。

  6. 注释和文档命名:注释和文档内容的命名应具有描述性,清晰明了,能够准确表达其含义和作用。

  7. 常见代码约定:除了命名规范,还有一些常见的代码约定,如:常量使用全大写字母和下划线、私有变量使用前缀下划线等。这些约定可以提高代码的可读性和维护性。

Vue项目命名规范

  1. 文件名命名规范:

    • 单词之间使用连字符(-)分隔,例如:home-page.vue
    • 文件名应该以组件名开头,例如:home-page.vue
  2. 组件名命名规范:

    • 组件名应该是多个单词的结合,采用帕斯卡命名法(PascalCase),例如:HomePage
    • 组件名应该以高层级组件名(如果有的话)开头,例如:HomeHomePage
    • 组件名应该尽量简洁明确,能够表达出组件的功能和用途
  3. 文件夹命名规范:

    • 文件夹名应该使用连字符(-)分隔单词,例如:home-page
    • 文件夹名应该以组件名开头,例如:home-page
  4. 路由命名规范:

    • 路由名应该使用连字符(-)分隔单词,例如:/home-page
    • 路由名应该是小写字母,并且以斜杠(/)开头
  5. CSS 类名命名规范:

    • 使用连字符(-)分隔单词,例如:.home-page
    • 类名应该简洁明确,能够表达出样式的用途

总体来说,Vue项目的命名规范应该尽量简洁明确,能够清晰表达出文件、组件、路由和样式的用途和功能。

相关推荐

  1. 前端通用命名规范Vue项目命名规范

    2024-03-30 01:04:03       18 阅读
  2. 前端代码规范-命名规范

    2024-03-30 01:04:03       11 阅读
  3. vue2中的文件命名规范

    2024-03-30 01:04:03       14 阅读
  4. CSS 命名规范-BEM

    2024-03-30 01:04:03       33 阅读
  5. Redis key命名规范

    2024-03-30 01:04:03       31 阅读
  6. CSS 命名规范 - BEM

    2024-03-30 01:04:03       15 阅读
  7. Vue前端规范【一】

    2024-03-30 01:04:03       27 阅读
  8. Vue前端规范【二】

    2024-03-30 01:04:03       26 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-30 01:04:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-30 01:04:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-30 01:04:03       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-30 01:04:03       20 阅读

热门阅读

  1. GIT使用小结

    2024-03-30 01:04:03       17 阅读
  2. 面试宝典:PHP中的Yac技术深度分析

    2024-03-30 01:04:03       17 阅读
  3. 什么是FLV

    2024-03-30 01:04:03       19 阅读
  4. 正则表达式

    2024-03-30 01:04:03       15 阅读
  5. 正则匹配/正则表达式

    2024-03-30 01:04:03       24 阅读
  6. Rust引用借用 vs 原始指针

    2024-03-30 01:04:03       17 阅读
  7. 库函数的模拟实现

    2024-03-30 01:04:03       18 阅读
  8. uniapp踩坑细节

    2024-03-30 01:04:03       20 阅读
  9. Element-UI中el-time-picker时间选择器无法选择

    2024-03-30 01:04:03       16 阅读
  10. js移除子元素

    2024-03-30 01:04:03       19 阅读