Vue前端開發規范

引用自:
vue官方
騰訊全端AlloyTeam 團隊

1 環境

1.1 代碼工具

推薦VSCode、webstorm、sublime、Atom
統一開發,盡量使用VSCode,輕量、插件多,免費

1.2 工具插件(VSCode)

Vue開發插件:eslintHTML CSS SupportHTML SnippetsLive ServerVeturVue VSCode Snippets

1.3 VSCode設置

保存時自動按照eslint規則格式化代碼

{
     "eslint.validate": [{
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true,
}

2 命名

2.1 項目命名

全部采用小寫方式, 以下劃線分隔。 例:my_project_name

2.2 目錄(文件夾)命名

參照項目命名規則;
有復數結構時,要采用復數命名法。
例:scriptsstylesimagesdata_models

image

2.2 文件命名

2.2.1 components

組件命名使用大駝峰(KebabCase)TodoItem.vue

2.2.2 views(pages)

頁面命名使用連接符(kebab-case)user-info.vue
如果views下的文件件只有一個文件,命名使用index.vue

│── views
│   └── user_info       
│         ├── index.vue

引用例子:
// 引用到  文件夾 + '/'即可
import("../views/user_info/")

2.2.3 JS文件命名

名使用分隔符線resize-event.js

如果為單個單詞,使用小寫md5.js

2.2.3 CSS, SCSS文件命名

  • css使用下劃線
jdc.scss
jdc_list.scss
jdc_detail.scss
  • scss使用下劃線開頭,
    @import 引入的文件不需要開頭的'_'和結尾的'.scss';
/* not good */
@import "_dialog.scss";

/* good */
@import "dialog";

2.2.4 HTML文件命名

使用下劃線

jdc.html
jdc_list.html
jdc_detail.html

2.3 組件

  • 組件名為多個單詞 (這樣做可以避免跟現有的以及未來的 HTML 元素相沖突,因為所有的 HTML 元素名稱都是單個單詞的。)
  • 組件使用大駝峰
export default {
  name: 'TodoItem',
  // ...
}

Vue.component('todo-item', {
  // ...
})
  • 基礎組件名 應用特定樣式和約定的基礎組件(也就是展示類的、無邏輯的或無狀態的組件) 應該全部以一個特定的前綴開頭,比如 BaseAppV
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue


components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue

components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue
  • 單例組件名 只應該擁有單個活躍實例的組件應該以 The 前綴命名,以示其唯一性。
components/
|- TheHeading.vue
|- TheSidebar.vue
  • 緊密耦合的組件名 和父組件緊密耦合的子組件應該以父組件名作為前綴命名。
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue
  • 組件名中的單詞順序
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue
  • 模板中的組件名大小寫 對于絕大多數項目來說,在單文件組件和字符串模板中組件名應該總是 PascalCase 的——但是在 DOM 模板中總是 kebab-case 的。
<!-- 在單文件組件和字符串模板中 -->
<MyComponent/>

<!-- 在 DOM 模板中 -->
<my-component></my-component>

或者
<!-- 在所有地方 -->
<my-component></my-component>
  • 完整單詞的組件名
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue
  • Prop 名大小寫 在聲明 prop 的時候,其命名應該始終使用 camelCase,而在模板和 JSX 中應該始終使用 kebab-case。
props: {
  greetingText: String
}

<WelcomeMessage greeting-text="hi"/>
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 命名編碼規范 駝峰式命名法介紹 -Pascal Case 大駝峰式命名法:首字母大寫。eg:StudentInfo...
    莫言默言閱讀 3,838評論 0 5
  • 一、命名規范 1、文件命名 文件夾/文件的命名統一用小寫,使用短橫線命名 (kebab-case),包括js、cs...
    taomas閱讀 4,192評論 0 2
  • 這里是官方的 Vue 特有代碼的風格指南。如果在工程中使用 Vue,為了回避錯誤、小糾結和反模式,該指南是份不錯的...
    youins閱讀 5,748評論 0 5
  • 前幾日聽到一句生猛與激勵并存,可怕與尷尬同在,最無奈也無解的話:“90后,你的中年危機已經殺到”。這令我很受觸動。...
    王鈺峰閱讀 4,415評論 1 22
  • 此文基于官方文檔,里面部分例子有改動,加上了一些自己的理解 什么是組件? 組件(Component)是 Vue.j...
    陸志均閱讀 3,856評論 5 14