Vue 前端开发规范

---

Vue 编码基础

Vue 项目规范以 Vue 官方规范官方 Vue 风格指南中的 A 规范为基础在其上面进行项目开发，故所有代码均遵守该规范。 也可以阅读文档系统 Vue 风格指南

INFO

请仔仔细细阅读 Vue 官方规范，切记，此为第一步。

1. api

   • 文件、变量命名要与后端保持一致。
   • 此目录对应后端 API 接口，按照后端一个 controller 一个 api.js 文件。若项目较大时，可以按照业务划分子目录，并与后端保持一致。
   • api 中的方法名字要与后端 api url 尽量保持语义高度一致性。
   • 对于 api 中的每个方法要添加注释，注释与后端接口文档保持一致。

2. assets

   • assels 为静态资源，里面存放 images,styles,icons 等静态资源，静态资源命名格式为 kebab-case

3. components

   • 此目录应按照组件进行目录划分，目录命名为 CamelCase，组件命名规则为 KebabCase

4. stores

   • 按照业务进行拆分不同的正文件

JavaScript 规范

1. 变量声明：

   • 使用 const 声明常量，let 声明变量，避免使用 var。

2. 对象和数组：

   • 对象字面量中，冒号和属性名之间要有一个空格，逗号后也要加空格。

     const user = {
       name: "John",
       age: 30,
     };

   • 数组字面量中的逗号后加一个空格。

3. 模块化：

   • 使用 ES6 的 import 和 export 语法进行模块导入导出。

4. 异步操作：

   • 使用 async/await 替代回调函数，确保异步操作的可读性。

样式与布局

1. CSS 预处理器：

   • 使用 SCSS，并在全局样式中进行基础设置。

2. CSS 方法：

   • 尽量避免使用 !important，除非极为必要。

3. 响应式设计：

   • 采用移动优先的设计原则，使用 @media 查询来支持不同的屏幕尺寸。

4. 布局方式：

   • 使用 Flexbox 和 Grid 布局来进行组件布局，避免使用传统的浮动布局。

常用工具与插件

1. ESLint：

   • 使用 ESLint 来检查 JavaScript 代码风格，确保一致性。

2. Prettier：

   • 使用 Prettier 来自动格式化代码，确保代码格式统一。

3. Vue Devtools：

   • 使用 Vue Devtools 来调试 Vue 应用，查看组件树和状态管理。

版本控制

1. Git 提交规范：

   • 每次提交前，确保执行 git pull 来同步代码。
   • 提交信息要简洁且具有描述性。
   • 使用 语义化提交，例如：
     • 提交类型(修改范围): 提交注释
     • feat(view): add user login feature
     • fix(view): resolve bug in login form
     • docs(README.MD): update README

2. 分支管理：

   • 使用功能分支（Feature Branch）进行开发，主分支使用 master 或 main。
   • 每个开发任务应从 dev 或 feature 分支创建，并合并回主分支。