# 风格指南
本项目的风格指南主要是参照 vue
官方的风格指南。在真正开始使用该项目之前建议先阅读一遍指南,这能帮助让你写出更规范和统一的代码。当然每个团队都会有所区别。其中大部分规则也都配置在了eslint-plugin-vue之中,当没有遵循规则的时候会报错,详细内容见eslint章节。
当然也有一些特殊的规范,是不能被 eslint 校验的。需要人为的自己注意,并且来遵循。最主要的就是文件的命名规则,这里拿vue-element-admin
来举例。
# 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
应该要保持统一 - 没有大小写敏感问题