Vue 项目开发规范

写在前面

本规范基于历史实践而总结，作为 Vue3 项目开发指导，请根据实际情况进行调整

文件夹名

1. 文件夹一律使用 kebab-case

   bad

   text

   helloWorld

   good

   text

   hello-world

2. 避免文件夹中只有一个文件的情况

组件名

1. 组件名称应至少由两个单词组成（根组件除外）
2. 组件文件的命名应统一使用 PascalCase 或者 kebab-case
3. 在 JS 或 JSX 中组件名应使用 PascalCase
4. 组件名称在单文件组件或字符串模板中应使用 PascalCase；但是在 Dom 模板（Web component）中应使用 kebab-case

Props 名

1. 定义 props 时使用 CamelCase
2. 在单文件组件、JSX、Dom 模板中，使用 kebab-case

指令

指令缩写（: 表示 v-bind:，@ 表示 v-on:，# 表示 v-slot）要么都使用，要么都不使用

单文件组件

单文件中应按照 <script>，<template>，<style> 的顺序

变量命名

1. 变量名应使用 CamelCase
2. 变量名称应简短、可读、有意义，禁止使用拼音和拼音首字母
3. 变量优先使用完整单词，临时变量或布局作用域可以使用单词的通用缩写形式，例如 ele，btn，obj，str；简单循环中可以使用 i，j，k 作为循环变量

常量命名

常量名应使用 CONSTANT_CASE，即全大写用 _ 分隔

函数命名

1. 函数名应使用 CamelCase
2. 函数应使用动词或动词 + 名称的形式
3. 请求数据的方法以 Data 结尾

项目目录推荐

src // 源码目录
├─ api // 接口，统一管理
├─ assets // 静态资源
│  ├─ icons // svg 图标
│  ├─ fonts // 字体
│  ├─ markdowns // markdown
│  └─ images // 图片
├─ styles // 样式文件
├─ components // 组件
├─ composables // 组合式函数
├─ enums // 枚举
├─ layouts // 布局
├─ router // 路由管理
├─ store // 状态管理
├─ utils // 工具函数
├─ views // 页面
├─ App.vue // 根组件
└─ main.ts // 入口文件

参考

• Vue 风格指南
• 掘金：史上最全的 Vue 开发规范