远航前端基建

Appearance

代码规范 ​

vue的代码规范主要是参照 vue 官方的风格指南。在真正开始使用该项目之前建议先阅读一遍指南，这能帮助让你写出更规范和统一的代码。当然每个团队都会有所区别。其中大部分规则也都配置在了eslint-plugin-vue之中，当没有遵循规则的时候会报错。

当然也有一些特殊的规范，是不能被 eslint 校验的。需要人为的自己注意，并且来遵循。最主要的就是文件的命名规则。

Component ​

所有的Component文件都是以大写开头 (PascalCase)，这也是官方所推荐的。

但除了 index.vue。

例子：

  • @/components/BackToTop/index.vue
  • @/components/Charts/Line.vue
  • @/views/example/components/Button.vue

JS 文件 ​

所有的.js文件都遵循横线连接 (kebab-case)。

例子：

  • @/utils/open-window.js
  • @/views/svg-icons/require-icons.js
  • @/components/MarkdownEditor/default-options.js

Views ​

在views文件下，代表路由的.vue文件都使用横线连接 (kebab-case)，代表路由的文件夹也是使用同样的规则。

例子：

  • @/views/svg-icons/index.vue
  • @/views/svg-icons/require-icons.js

使用横线连接 (kebab-case)来命名views主要是出于以下几个考虑。

  • 横线连接 (kebab-case) 也是官方推荐的命名规范之一 文档
  • views下的.vue文件代表的是一个路由，所以它需要和component进行区分(component 都是大写开头)
  • 页面的url 也都是横线连接的，比如https://www.xxx.admin/export-excel，所以路由对应的view应该要保持统一
  • 没有大小写敏感问题

变量命名 ​

  1. 采用小写驼峰命名 lowerCamelCase
  2. 方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase风格，必须遵从驼峰形式 正例： localValue / getHttpMessage() / inputUserId 其中 method 方法命名必须是 动词 或者 动词+名词 形式 正例： saveShopCarData /openShopCarInfoDialog 反例： save / open / show / go 特此说明，增删查改，详情统一使用如下 5 个单词，不得使用其他（目的是为了统一各个端）
add / update / delete / detail / get
附： 函数方法常用的动词:
get 获取/set 设置,
add 增加/remove 删除,
create 创建/destory 销毁,
start 启动/stop 停止,
open 打开/close 关闭,
read 读取/write 写入,
load 载入/save 保存,
begin 开始/end 结束,
backup 备份/restore 恢复,
import 导入/export 导出,
split 分割/merge 合并,
inject 注入/extract 提取,
attach 附着/detach 脱离,
bind 绑定/separate 分离,
view 查看/browse 浏览,
edit 编辑/modify 修改,
select 选取/mark 标记,
copy 复制/paste 粘贴,
undo 撤销/redo 重做,
insert 插入/delete 移除,
add 加入/append 添加,
clean 清理/clear 清除,
index 索引/sort 排序,
find 查找/search 搜索,
increase 增加/decrease 减少,
play 播放/pause 暂停,
launch 启动/run 运行,
compile 编译/execute 执行,
debug 调试/trace 跟踪,
observe 观察/listen 监听,
build 构建/publish 发布,
input 输入/output 输出,
encode 编码/decode 解码,
encrypt 加密/decrypt 解密,
compress 压缩/decompress 解压缩,
pack 打包/unpack 解包,
parse 解析/emit 生成,
connect 连接/disconnect 断开,
send 发送/receive 接收,
download 下载/upload 上传,
refresh 刷新/synchronize 同步,
update 更新/revert 复原,
lock 锁定/unlock 解锁,
check out 签出/check in 签入,
submit 提交/commit 交付,
push 推/pull 拉,
expand 展开/collapse 折叠,
enter 进入/exit 退出,
abort 放弃/quit 离开,
obsolete 废弃/depreciate 废旧,
collect 收集/aggregate 聚集
  1. 常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚， 不要嫌名字长

正例： MAX_STOCK_COUNT

反例： MAX_COUNT