## 风格指南
本项目的风格指南主要是参照`vue`官方的[风格指南](https://cn.vuejs.org/v2/style-guide/index.html)。在真正开始使用该项目之前建议先阅读一遍指南，这能帮助让你写出更规范和统一的代码。当然每个团队都会有所区别。其中大部分规则也都配置在了[eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)之中，当没有遵循规则的时候会报错，详细内容见[eslint](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/eslint.html)章节。
当然也有一些特殊的规范，是不能被 eslint 校验的。需要人为的自己注意，并且来遵循。最主要的就是文件的命名规则，这里拿`vue-element-admin`来举例。
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/style-guide.html#component)Component
所有的`Component`文件都是以大写开头 (PascalCase)，这也是官方所[推荐的](https://cn.vuejs.org/v2/style-guide/index.html#%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6%E6%96%87%E4%BB%B6%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%86%99-%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90)。
但除了`index.vue`。
例子：
* `@/src/components/BackToTop/index.vue`
* `@/src/components/Charts/Line.vue`
* `@/src/views/example/components/Button.vue`
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/style-guide.html#js-%E6%96%87%E4%BB%B6)JS 文件
所有的`.js`文件都遵循横线连接 (kebab-case)。
例子：
* `@/src/utils/open-window.js`
* `@/src/views/svg-icons/require-icons.js`
* `@/src/components/MarkdownEditor/default-options.js`
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/style-guide.html#views)Views
在`views`文件下，代表路由的`.vue`文件都使用横线连接 (kebab-case)，代表路由的文件夹也是使用同样的规则。
例子：
* `@/src/views/svg-icons/index.vue`
* `@/src/views/svg-icons/require-icons.js`
使用横线连接 (kebab-case)来命名`views`主要是出于以下几个考虑。
* 横线连接 (kebab-case) 也是官方推荐的命名规范之一[文档](https://cn.vuejs.org/v2/style-guide/index.html#%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6%E6%96%87%E4%BB%B6%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%86%99-%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90)
* `views`下的`.vue`文件代表的是一个路由，所以它需要和`component`进行区分(component 都是大写开头)
* 页面的`url`也都是横线连接的，比如`https://www.xxx.admin/export-excel`，所以路由对应的`view`应该要保持统一
* 没有大小写敏感问题
