## 風格指南 本項目的風格指南主要是參照`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`應該要保持統一 * 沒有大小寫敏感問題