VUE命名規范


其實剛開始我寫 vue 文件的時候也不注意,各種駝峰啊、大寫開頭 (PascalCase)還是橫線連接 (kebab-case)混着來,誰叫 vue 都可以,在 風格指南 中也沒有定論。不過基於本項目我還是整理了一套文件的命名規則。

Component

所有的Component文件都是以大寫開頭 (PascalCase),這也是官方所 推薦的

但除了 index.vue

例子:

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

JS 文件

所有的.js文件都遵循橫線連接 (kebab-case)。

例子:

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

Views

views文件下,代表路由的.vue文件都使用橫線連接 (kebab-case),代表路由的文件夾也是使用同樣的規則。

例子:

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

使用橫線連接 (kebab-case)來命名views主要是出於以下幾個考慮。

  • 橫線連接 (kebab-case) 也是官方推薦的命名規范之一 文檔
  • views下的.vue文件代表的是一個路由,所以它需要和component進行區分(component 都是大寫開頭)
  • 頁面的url 也都是橫線連接的,比如https://www.xxx.admin/export-excel,所以路由對應的view應該要保持統一
  • 沒有大小寫敏感問題

作者:花褲衩
鏈接:https://juejin.cn/post/6844903840626507784
來源:稀土掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM