Vue开发命名规范

本文具体阐述Vue开发中使用的各种场景命名的规范详情，Vue2和Vue3有不一致的地方会分别列出！

命名一定要和业务关联起来，坚决杜绝类似demo1,demo2,test1这种无法理解的命名方式。

1. Vue开发中常用的命名方式

• camelCase（小驼峰式命名法 —— 首字母小写）
• PascalCase（大驼峰式命名法 —— 首字母大写）
• kebab-case（短横线连接式）
• Snake（下划线连接式）

2. Vue项目目录命名

1. 项目名称：全部采用小写方式， 以短横线分隔，不同端在文件命名上加上后缀，pc端加-web，移动端h5加-mobile，app(h5混合开发)加-app等。例：my-test-project-web、demo-project-mobile、vividaqua-water-app。

2. 目录名称：有复数结构时候，使用复数命名法。比如：docs、assets、components、utils、views、pages等。

3. 图片：全部小写，最好一个单词搞定，多个单词下划线隔开。如果是icon类型的图片，最好加icon_前缀。 例: icon_menu.png、login_bac.png。

4. html文件：全部小写，最好一个单词搞定，多个单词下划线隔开。例: error_resport.html。

5. css文件(包含less，scss、stylus等预编译的命名规则)：全部采用小写方式， 优先选择单个单词命名，多个单词命名以短横线分隔。例: base.less、input-number.css。

6. js文件(包含ts文件但不包含配置性文件)：全部采用小写方式， 优先选择单个单词命名，多个单词命名以短横线分隔。例：index.js、todo-list.js、 data-format.ts。

7. 配置性文件(脚手架自动生成的不做研究): 全部采用小写方式， 优先选择单个单词命名，多个单词命名以短横线分隔，表示配置部分以.分隔。 例： vite.config.ts、components.d.ts、vite-env.d.ts、auto-import.d.ts。

8. vue组件

   • 基础组件(通用组件)：不包含业务，独立、具体功能的基础组件，比如日期选择器、模态框等。这类组件作为项目的基础控件，会被大量使用，因此组件的 API 进行过高强度的抽象，可以通过不同配置实现不同的功能。应用特定样式和约定的基础组件(也就是展示类的、无逻辑的或无状态、不掺杂业务逻辑的组件) 应该全部以一个特定的前缀开头 — Base。基础组件在一个页面内可使用多次，在不同页面内也可复用，是高可复用组件。例: BaseButton.vue、BaseTable.vue、BaseForm.vue等。

   • 业务组件(通用组件)：它不像基础组件只包含某个功能，而是在业务中被多个页面复用的（具有可复用性），它与基础组件的区别是，业务组件只在当前项目中会用到，不具有通用性，而且会包含一些业务，比如数据请求；而基础组件不含业务，在任何项目中都可以使用，功能单一，比如一个具有数据校验功能的输入框。掺杂了复杂业务的组件（拥有自身 data、prop 的相关处理）即业务组件应该以 Custom 前缀命名。业务组件在一个页面内比如：某个页面内有一个卡片列表，而样式和逻辑跟业务紧密相关的卡片就是业务组件。例: CustomCard.vue等。

   • 新增/编辑/删除(操作组件非通用): 针对每个菜单功能的操作功能对应的组件， 在这边组件中再调用通用组件。例: components/ add.vue、edit.vue、detail.vue。

   • 组件名应该倾向于而不是缩写，组件名应该始终是多个单词，应该始终是 PascalCase 的。

   • 在单文件组件和字符串模板中组件名应该总是 PascalCase 的，但是在 DOM 模板中总是 kebab-case 的。

     <!-- 在单文件组件和字符串模板中 --> 
     <MyComponent/>
     
     <!-- 在 DOM 模板中 --> 
     <my-component></my-component>
     

3. Vue代码细节

• 变量: 小驼峰。例: tableTitle。

• 常量：全大写字母然后用下划线组合。例：const MAX_COUNT = 10。

• 方法函数: 小驼峰。例：getTitle、getDetail、handleClick。

• 自定义事件: kebab-case，小写单词，用 - 隔开。

  <my-component @my-handle-click="dataRefresh">
  this.$emit('my-handle-click')
  // 用来区分prop的变量的小驼峰。 dataRefresh是组件的方法名称所以用小驼峰。
  

• v-if 和 v-for 互斥： 不要把 v-if 和 v-for 同时用在同一个元素上。把v-if放在 <template> 标签或者更合适的位置。

• 常用指令缩写

  未缩写	缩写	备注
  v-bind	:	数据绑定
  v-on	@	方法绑定
  v-slot	#	插槽

• • Visual Studio Code 编辑器快速生成模版。快速生成模版详情。