前端开发规范。

# 前端规范

# Vue 版本

✅ vue 3.0 (opens new window)

# vue.onfig.js

雪碧图、SVG

拆包

别名

# JS 编译器

✅ babel (opens new window)

✅ typescript (opens new window)

# Hooks 钩子

✅ yorkie (opens new window) - 基于 husky，Vue 自带

commit message 规范（中英文）

# ESLint 规则

✅ Standard (opens new window)

✅ vue/order-in-components

# 目录


├─public                      // 非编译
│  iconfont
├─src                         // 源码
│ │  App.vue
│ │  main.js                  // VUE 入口
│ ├─assets                    // 资源库
│ │ ├─sprites                 // 雪碧图
│ │ │ ├─png
│ │ │ └─svg
│ │ ├─images                  // 图片
│ │ │ └─logo.png
│ │ ├─audios                  // 音频
│ │ │ └─alert.mp3
│ │ ├─style                   // 公共样式
│ │ │ └─index.scss
│ │ └─themes                  // 皮肤
│ │   └─index.scss
│ ├─common                    // 通用
│ │ ├─modules                 // 模块
│ │ ├─bus                     // bus
│ │ ├─request                 // axios、fetch封装
│ │ ├─api                     // API 接口
│ │ ├─mixin                   // mixin
│ │ └─utils                   // 工具库
│ ├─components                // 公共组件
│ │ ├─base                    // 基础组件
│ │ │ └─SvgIcon.vue
│ │ └─map                     // 地图组件
│ │   index.js
│ ├─router                    // 路由
│ │ └─modules
│ │   index.js
│ ├─store                     // 状态管理
│ │ └─modules
│ │   ├─ui.js                 // themes 及 样式变量
│ │   └─map.js                // 地图相关
│ │   index.js
│ └─views                     // 视图
│   └─home                    // 主模块
│     └─modules               // 此主模块的子模块
│     index.vue
├─.editorconfig               // 编辑器配置
├─.gitignore                  // git 忽略配置
├─babel.config.js             // 编译配置
├─package-lock.json           // 非编译文件夹
├─package.json                // 项目依赖、公共配置等
└─README.md                   // 项目说明

# 名称

不能用拼音

文件夹：全小写+中杠比如： mti-gis

文件：
js: 小驼峰比如：helloWorld.js

vue: 大驼峰比如：HelloWorld.vue

css: 小驼峰比如：helloWorld.css

图片：全小写+下划线比如：icon_title_hl.png

CSS样式：全小写+中杠比如： .list-item #list-item

js 变量：小驼峰

# main.js

引用 modules.js

$bus

$utils (cookie、base64)

$api

# Git提交规范

git commit提交格式（注意冒号后面有空格）

:

常用的type类别

feat：新功能（feature）

fix：修补bug

perf: 性能优化

docs：文档（documentation）

refactor：重构（即不是新增功能，也不是修改bug的代码变动）

test：增加测试

例子：如：feat: 已动词开头，包含功能模块名称

git commit -m 'feat: 增加 xxx 功能'

git commit -m 'fix: 修复 # bug编号'

# 注释规范

使用JSDoc 3 (opens new window) 规范
例子：

/**
 * 功能介绍
 * @author <作者> [<邮箱可选>]
 * @param {类型} 参数名 描述.
 * @param {string} name=alice 姓名(默认alice).
 * @param {object} option 配置信息.
 * @param {nameCallback} cb 回调函数.
 * @return {Number} 描述
 */
function name (name, option, cb) {
   return 1
}
/**
 * 回调介绍
 * @callback nameCallback
 * @param {object} err 错误信息
 * @param {Number} num 参数
 */