Vue 項(xiàng)目規(guī)范

Vue 項(xiàng)目規(guī)范

vue項(xiàng)目規(guī)范以https://cn.vuejs.org/v2/style-guide/的A規(guī)范為基礎(chǔ)

:snake: PascalCase 即大寫字母開頭的駝峰命名法

一、組件規(guī)范

1.1 組件名應(yīng)該是多個(gè)單詞

組件應(yīng)該是由多個(gè)單詞組成(大于等于2)，且命名規(guī)范為 PascalCase 格式。這樣是為了避免與現(xiàn)在以及未來的HTML元素沖突。

推薦 :white_check_mark:

export default { 
    name : 'TodoItem'
}

不推薦 :negative_squared_cross_mark:

export default { 
    name : 'Todo'
}
export default { 
    name : 'todo'
}

1.2 組件文件名

組件文件名應(yīng)該是 kebab-case 格式

推薦 :white_check_mark:

components/
|- my-component.vue

不推薦 :negative_squared_cross_mark:

components/
|- myComponent.vue 
|- MyComponent.vue

1.3 基礎(chǔ)組件命名

基礎(chǔ)組件文件名為 base 開頭，使用完整單詞而不是縮寫

components/
|- base-button.vue

反例

components/
|- MyButton.vue
|- VueTable.vue

1.4 子組件命名

子組件若與父組件緊密耦合，則必須以父組件作為前綴命名

推薦 :white_check_mark:

components/
|- todo-list.vue
|- todo-list-item.vue
|- todo-list-item-button.vue

不推薦 :negative_squared_cross_mark:

components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue

1.5 模板標(biāo)簽書寫

在模板標(biāo)簽中使用組件，應(yīng)該使用 PascalCase 格式，并且使用自閉合組件

推薦 :white_check_mark:

<MyComponent />
<Row><table :colum="data" /></Row>

不i推薦 :negative_squared_cross_mark:

<my-component />
<row><table :column="data"/></row>

1.6 組件data必須是函數(shù)

因?yàn)楹瘮?shù)可以保證每次返回的都是一個(gè)新的對象，否則，將所有組件共用一個(gè)對象

1.7 Props 定義必須詳細(xì)

  • 必須使用 camelCase 命名
  • 必須指定類型
  • 必須加上注釋，表明其含義
  • 必須加上 required 或者 default，或者二選一
  • 如果有業(yè)務(wù)需要，必須加上 validator 驗(yàn)證
export default { 
    props : { 
    status : { 
        type : String,
      required : true,
      validator(value){
        return [
          'succ',
          'info',
          'error'
        ].indexOf(value) > -1
      }
    },
    userLevel : { 
        type : String,
      required : true 
    }
  }
}

1.8 為樣式設(shè)置作用域

<style>標(biāo)簽添加 scoped屬性

1.9. 特性元素較多，必須換行

推薦 :white_check_mark:

<data-time
  v-model="start_time"
  :width="180"
  @change="oncheck"
  @focus="onclaer"
  :options="start"
  @blur="onBlur"
></data-time>

不推薦 :negative_squared_cross_mark:

 <data-time v-model="start_time" :width='180' @change="oncheck" @focus="onclaer" :options="start" @blur="onBlur"></data-time>

1.10. 模板中使用簡單的表達(dá)式

組件模板應(yīng)該只包含簡單的表達(dá)式，負(fù)責(zé)的表達(dá)式應(yīng)該重構(gòu)為計(jì)算屬性或方法。復(fù)雜表達(dá)式會
讓你的模板變得不那么聲明式。 我們應(yīng)該盡量描述應(yīng)該出現(xiàn)的是什么， 而非如何計(jì)算那個(gè)值。 而
且計(jì)算屬性和方法使得代碼可以重用。

推薦 :white_check_mark:

<div v-if="status == 3 || status == 4 || !hasPlayBack">直播結(jié)束</div>

<script>
export default { 
    computed : { 
    isLiveEnd() { 
        return this.status == 3 || this.status == 4 || !this.hasPlayBack
    }
  }
}
</script>

不推薦 :white_check_mark:

<div v-if="status == 3 || status == 4 || !hasPlayBack">直播結(jié)束</div>

1.11. 指令使用縮寫形式

推薦 :white_check_mark:

<input
  @input="onInput"
  @focus="onFocus"
>

不推薦 :negative_squared_cross_mark:

<input
  @input="onInput"
  @focus="onFocus"
>

1.12. 標(biāo)簽順序保持一致

單文件組件總是讓標(biāo)簽順序保持為

<template></template>
<script></script>
<style></style>

二、Vue-Router 規(guī)范

2.1 頁面跳轉(zhuǎn)使用路由傳參

不要保存在 store 中，而是直接用 query 帶過去，因?yàn)楸４嬖?store 中，會因?yàn)樗⑿马撁鎸?dǎo)致數(shù)據(jù)丟失

2.2 使用路由懶加載

{
  path: '/uploadAttachment',
  name: 'uploadAttachment',
  meta: {
    title: '上傳附件'
  },
  component: () => import('@/view/components/uploadAttachment/index.vue')
}

2.3 router命名規(guī)范

  • path、childrenPoints 命名使用 kebeb-case 命名規(guī)范(與vue的目錄結(jié)構(gòu)保持一致)
  • name 命名使用 PascalCase 命名，但是要與component組件名保持一致(因?yàn)橐３謐eep-alive特性，所以必須一致)
  • path 命名使用 kebeb-case 命名，而且必須是/開頭，另外子路由也需要使用/完整路徑(這樣查找會比較容易)
const routes = [
  {
        path : '/login',
    name : 'File',
    component : Man,
    meta : {...},
    children : [
      {
        path : '/file/file-list',
        name : 'FileList',
        component : ()=> import('@/views/file/file-list.vue')
      }
    ]
  }
]

三、項(xiàng)目目錄規(guī)范

3.1 前后端命名統(tǒng)一

vue 項(xiàng)目中所有命名一定要與后端命名統(tǒng)一。

例如 : 后端 privilege，前端無論是 route 、store 、api 等都必須使用 privilege

3.2 使用 vue-cli 或者 vite

腳手架

3.3 目錄說明

目錄名按照下面命名，目錄下的文件，沒有特別原因，統(tǒng)一用 kebab-case 命名

src             源碼目錄
|-- api     所有api接口
|-- assets 靜態(tài)資源，images、icons、styles等
|-- components 公共組件
|-- config 配置信息
|-- constants 常量信息，項(xiàng)目所有Enum，全局變量等 
|-- directives 自定義指令
|-- filters 過濾器，全局工具
|-- datas 模擬數(shù)據(jù)，臨時(shí)存放
|-- lib 外部引用的插件存放以及修改文件
|-- mock 模擬接口，臨時(shí)存放
|-- plugins 插件，全局使用
|-- router 路由，統(tǒng)一管理
|-- store vuex，統(tǒng)一管理
|-- themes 自定義樣式主題
|-- views 視圖目錄
|   |--role role 模塊名
|   |-- |-- role-list.vue role 列表頁面

api 目錄

  • 文件、變量名要與后端保持一致
  • 此目錄對應(yīng)后端API接口，一個(gè)Controller對應(yīng)一個(gè)js文件。若項(xiàng)目比較大，則按照業(yè)務(wù)劃分子目錄，并且與后端保持一致
  • api 的方法命名盡量與后端 api url 保持語義的高度一致性
  • 對于 api 的每個(gè)方法要添加注釋，注釋要與后端 swagger 文檔保持一致
// 后端 EmployeeController.java
/**
 * /employee/add
 * /employee/delete/{id}
 * /employee/update
*/
function addEmplyoee(data) {
  return request({
        url : '/employee/add',
    data,
    method : 'post'
  })
}
...

assets 目錄

靜態(tài)資源目錄，里面存放 images、styles、icons等資源，也是用 kebab-case 命名

|assets 
|-- icons 
|-- images 
|     |-- background-color.png
|     |-- upload-header.png 
|-- styles

components 目錄

組件存放目錄，目錄命名為 kebab-case ，組件命名規(guī)則也是 kebab-case

|components 
|-- error-log
|     |-- index.vue
|     |-- index.scss

constants 目錄

此目錄存放項(xiàng)目的所有常量，如果常量在vue中使用，請使用 vue-enum 插件

|constants
|-- index.js 
|-- role.js 
|-- employee.js

router 與 store

這兩個(gè)目錄一定要按照業(yè)務(wù)拆分，不能放到一個(gè)js文件中

  • router 盡量按照 views 中的結(jié)構(gòu)保持一致

  • store 按照業(yè)務(wù)進(jìn)行拆分不同的js

views目錄

命名要與后端、router、api保持一致

|views 
|  |-- role 組件模塊名
|  |     |-- role-list.vue role列表頁面
|  |     |-- role-add.vue role新建頁面
|  |     |-- role-update.vue role更新頁面
|  |     |-- index.less role模塊樣式
|  |     |-- components role 模塊 通用模塊組件文件夾
|  |     |     |-- role-header.vue role頭部組件

3.4 其他說明

注釋

整理必須加注釋的地方

  • 公共組件使用說明
  • api 目錄的接口 js 文件必須添加注釋
  • store 中 state，mutation，action 等必須添加注釋
  • vue 文件中的 methods，每個(gè) method 必須添加注釋
  • vue 文件中的 data，非常見單詞需要添加注釋

手動操作DOM

因?yàn)橐呀?jīng)使用Vue數(shù)據(jù)驅(qū)動框架，盡量通過數(shù)據(jù)驅(qū)動的形式更新DOM，不到萬不得已不要手動操作DOM，包括

  • 增刪改DOM元素
  • 更改樣式
  • 添加事件
刪除無效代碼

例如console.log等廢棄或調(diào)試的代碼

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一簡介 此規(guī)范基于腳手架vue-cli3.+ 從編寫IDE,到項(xiàng)目結(jié)構(gòu),命名規(guī)范,代碼風(fēng)格,包括代碼邏輯等,都做了...
    癮_95f1閱讀 2,023評論 2贊 4
  • 技術(shù)棧 vue2 vuex vue-router webpack ES6/7 axios less/sass vu...
    16manman閱讀 1,091評論 0贊 1
  • Vue項(xiàng)目中js命名規(guī)則 類型規(guī)范示例常量全字符大寫，單詞用下劃線_分隔FETCH_USERS、GET_USERS...
    黃孝斌閱讀 310評論 0贊 0
  • 本文檔為前端vue 開發(fā)規(guī)范 ·規(guī)范目的 ·命名規(guī)范 ·結(jié)構(gòu)化規(guī)范 ·注釋規(guī)范 ·編碼規(guī)范 ·CSS 規(guī)范 規(guī)范目...
    近朱者熾閱讀 1,024評論 0贊 3
  • 編程規(guī)約 規(guī)范的目的是為了編寫高質(zhì)量的代碼， 讓你的團(tuán)隊(duì)成員每天得心情都是愉悅的， 大家在一起是快樂的 一、命名規(guī)...
    zdxhxh閱讀 549評論 0贊 0

友情鏈接更多精彩內(nèi)容