前端团队项目规范系列：（二）代码规范
一、项目结构规范
项目采用公司前端团队搭建的脚手架，技术栈使用Vue3+Vite+Pinia+JavaScript，代码参照Airbnb JavaScript风格指南，结合eslint和prettier配置强制规范代码。首先按团队规范安装相应插件，按上一篇文章配置好相应插件以后，拷贝团队脚手架。下面逐一解释下项目通用文件夹配置：
（一）api文件夹
- 1、index.js文件：用于对axios进行二次封装，包括BaseUrl配置、超时配置、请求头配置、请求拦截、响应拦截等。
- 2、XXX.js文件：该文件按功能模块建立，用于在二次封装的axios基础上发送网络请求，采取分别暴露的方式完成，每一个请求的写法为
(二) assets文件夹
- 用于放置静态资源图片、css重置样式等。
(三) components文件夹
- 1、如果是路由组件下属的非路由组件，则与路由组件命名一致。
- 2、如果是通用组件，则以大驼峰方式命名。
(四) router文件夹
- 用于放置路由配置文件，路由守卫也需要写在这里。
(五) store文件夹
用于放置仓库文件，用于数据统一管理：
- 1、index.js：用于初始化仓库。
- 2、!XXX.js：按功能建立仓库。
(六) utils文件夹
用于放置工具文件，如表单校验规则、经纬度转换函数、时间转换函数、加密解密等。
(七) views文件夹
用于放置路由组件。
(八) README.md
该文件由项目负责人编写，用于呈现该项目的结构，需完全写清楚每一个文件夹和每一个文件的作用。
二、代码组件化规范
以组件化、低耦合度为标准，每个组件按功能进行拆分，便于后期维护与复用，单文件组件代码不超过300行，以登录页面举例，在views文件夹下有Passport文件夹，用于存放登录、注册、忘记密码等用户控制模块，
接下来的写法为：
（一）在该路由组件内，写入三个非路由组件。
（二）在components文件夹下建立相应的非路由组件，由于是通用组件，所以命名遵循大驼峰规范。
（三）在utils文件夹下建立相关的表单校验规则文件，用于登录表单的规则校验和存放数据。
（四）在store文件夹下建立相应的仓库，用于存放登录请求和请求返回的token等数据。
三、命名规范
（一）文件命名规范
- 所有文件均以驼峰命名方式组合式语义化命名，不得使用拼音，不得使用单个英文单词（除index外）。其中通用非路由组件采用大驼峰方式命名，其余文件均采用小驼峰方式命名，路由组件对应的非路由组件命名方式为
模块名+功能名。如 数据管理 的路由组件命名为dataManager，非路由组件中新增功能组件命名为dataManagerAdd。
（二）变量命名规范
- 变量命名以小驼峰命名方式组合式语义化命名，不得使用拼音，不得使用单个英文单词（除index外）。如网络请求中发起机构邮箱验证码的请求，方法命名方式为http_getEmailAuthCode，并用const进行声明。
