當前位置：首頁 > 前端技术 > vue >内容正文

vue

（七）Vue 项目规范

發布時間：2023/12/31 vue 25 豆豆

生活随笔收集整理的這篇文章主要介紹了（七）Vue 项目规范小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Vue 項目規范

- Vue 編碼基礎
- - 組件規范
  - 模板中使用簡單的表達式
  - 指令都使用縮寫形式
  - 標簽順序保持一致
  - 必須為 v-for 設置鍵值 key
  - v-show 與 v-if 選擇
  - script 標簽內部結構順序
  - Vue Router 規范
- Vue 項目目錄規范
- - 基礎
  - 使用 Vue-cli 腳手架
  - 目錄說明
  - 注釋說明
  - 其他

Vue 編碼基礎

vue 項目規范以Vue 官方規范中的 A 規范為基礎，在其上面進行項目開發，故所有代碼均遵守該規范。

請仔仔細細閱讀 Vue 官方規范，切記，此為第一步。

組件規范

1) 組件名為多個單詞。

組件名應該始終是多個單詞組成（大于等于 2），且命名規范為KebabCase格式。
這樣做可以避免跟現有的以及未來的 HTML 元素相沖突，因為所有的 HTML 元素名稱都是單個單詞的。

正例：

export default {name: 'TodoItem'// ... };

反例：

export default {name: 'Todo',// ... } export default {name: 'todo-item',// ... }

2) 組件文件名為 pascal-case 格式

正例：

components/
|- my-component.vue
反例：

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

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

正例：

components/
|- base-button.vue
|- base-table.vue
|- base-icon.vue
反例：

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

4) 和父組件緊密耦合的子組件應該以父組件名作為前綴命名
正例：

components/
|- todo-list.vue
|- todo-list-item.vue
|- todo-list-item-button.vue
|- user-profile-options.vue （完整單詞）
反例：

components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
|- UProfOpts.vue （使用了縮寫）

5) 在 Template 模版中使用組件，應使用 PascalCase 模式，并且使用自閉合組件。

正例：

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

反例：

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

6) 組件的 data 必須是一個函數
當在組件中使用 data 屬性的時候 (除了 new Vue 外的任何地方)，它的值必須是返回一個對象的函數。因為如果直接是一個對象的話，子組件之間的屬性值會互相影響。

正例：

export default {data () {return {name: 'jack'}} }

反例：

export default {data: {name: 'jack'} }

7) Prop 定義應該盡量詳細
必須使用 camelCase 駝峰命名
必須指定類型
必須加上注釋，表明其含義
必須加上 required 或者 default，兩者二選其一
如果有業務需要，必須加上 validator 驗證
正例：

props: {// 組件狀態，用于控制組件的顏色status: {type: String,required: true,validator: function (value) {return ['succ','info','error'].indexOf(value) !== -1}},// 用戶級別，用于顯示皇冠個數userLevel：{type: String,required: true} }

8) 為組件樣式設置作用域
正例：

<template><button class="btn btn-close">X</button> </template> <style scoped>.btn-close {background-color: red;} </style>

反例：

<template><button class="btn btn-close">X</button> </template>  <style>.btn-close {background-color: red;} </style>

9) 如果特性元素較多，應該主動換行。
正例：

反例：

模板中使用簡單的表達式

組件模板應該只包含簡單的表達式，復雜的表達式則應該重構為計算屬性或方法。復雜表達式會讓你的模板變得不那么聲明式。我們應該盡量描述應該出現的是什么，而非如何計算那個值。而且計算屬性和方法使得代碼可以重用。

正例：

<template><p>{{ normalizedFullName }}</p> </template>// 復雜表達式已經移入一個計算屬性 computed: {normalizedFullName: function () {return this.fullName.split(' ').map(function (word) {return word[0].toUpperCase() + word.slice(1)}).join(' ')} }

反例：

<template><p>{{fullName.split(' ').map(function (word) {return word[0].toUpperCase() + word.slice(1)}).join(' ')}}</p> </template>

指令都使用縮寫形式

指令推薦都使用縮寫形式，(用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:)

正例：

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

反例：

<inputv-on:input="onInput"@focus="onFocus" >

標簽順序保持一致

單文件組件應該總是讓標簽順序保持為 `

正例：

反例：

必須為 v-for 設置鍵值 key

v-show 與 v-if 選擇

如果運行時，需要非常頻繁地切換，使用 v-show ；如果在運行時，條件很少改變，使用 v-if。

script 標簽內部結構順序

components > props > data > computed > watch > filter > 鉤子函數（鉤子函數按其執行順序） > methods

Vue Router 規范

1) 頁面跳轉數據傳遞使用路由參數

頁面跳轉，例如 A 頁面跳轉到 B 頁面，需要將 A 頁面的數據傳遞到 B 頁面，推薦使用路由參數進行傳參，而不是將需要傳遞的數據保存 vuex，然后在 B 頁面取出 vuex 的數據，因為如果在 B 頁面刷新會導致 vuex 數據丟失，導致 B 頁面無法正常顯示數據。

正例：

let id = ' 123'; this.$router.push({ name: 'userCenter', query: { id: id } });

2) 使用路由懶加載（延遲加載）機制

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

3) router 中的命名規范
path、childrenPoints 命名規范采用kebab-case命名規范（盡量vue文件的目錄結構保持一致，因為目錄、文件名都是kebab-case，這樣很方便找到對應的文件）

name 命名規范采用KebabCase命名規范且和component組件名保持一致！（因為要保持keep-alive特性，keep-alive按照component的name進行緩存，所以兩者必須高度保持一致）

// 動態加載 export const reload = [{path: '/reload',name: 'reload',component: Main,meta: {title: '動態加載',icon: 'icon iconfont'},children: [{path: '/reload/smart-reload-list',name: 'SmartReloadList',meta: {title: 'SmartReload',childrenPoints: [{title: '查詢',name: 'smart-reload-search'},{title: '執行reload',name: 'smart-reload-update'},{title: '查看執行結果',name: 'smart-reload-result'}]},component: () =>import('@/views/reload/smart-reload/smart-reload-list.vue')}]} ];

4)router 中的 path 命名規范

path除了采用kebab-case命名規范以外，必須以 / 開頭，即使是children里的path也要以 / 開頭。如下示例

目的：

經常有這樣的場景：某個頁面有問題，要立刻找到這個vue文件，如果不用以/開頭，path為parent和children組成的，可能經常需要在router文件里搜索多次才能找到，而如果以/開頭，則能立刻搜索到對應的組件

{path: '/file',name: 'File',component: Main,meta: {title: '文件服務',icon: 'ios-cloud-upload'},children: [{path: '/file/file-list',name: 'FileList',component: () => import('@/views/file/file-list.vue')},{path: '/file/file-add',name: 'FileAdd',component: () => import('@/views/file/file-add.vue')},{path: '/file/file-update',name: 'FileUpdate',component: () => import('@/views/file/file-update.vue')}]}

Vue 項目目錄規范

基礎

vue 項目中的所有命名一定要與后端命名統一。

比如權限：后端 privilege, 前端無論 router , store, api 等都必須使用 privielege 單詞！

使用 Vue-cli 腳手架

使用 vue-cli3 來初始化項目，項目名按照上面的命名規范。

目錄說明

目錄名按照上面的命名規范，其中 components 組件用大寫駝峰，其余除 components 組件目錄外的所有目錄均使用 kebab-case 命名。

1) api 目錄

文件、變量命名要與后端保持一致。
此目錄對應后端 API 接口，按照后端一個 controller 一個 api js 文件。若項目較大時，可以按照業務劃分子目錄，并與后端保持一致。
api 中的方法名字要與后端 api url 盡量保持語義高度一致性。
對于 api 中的每個方法要添加注釋，注釋與后端 swagger 文檔保持一致。
正例：

后端 url： EmployeeController.java

/employee/add
/employee/delete/{id}
/employee/update

前端： employee.js

// 添加員工addEmployee: (data) => {return postAxios('/employee/add', data)},// 更新員工信息updateEmployee: (data) => {return postAxios('/employee/update', data)},// 刪除員工deleteEmployee: (employeeId) => {return postAxios('/employee/delete/' + employeeId)},

2) assets 目錄
assets 為靜態資源，里面存放 images, styles, icons 等靜態資源，靜態資源命名格式為 kebab-case

此目錄應按照組件進行目錄劃分，目錄命名為 KebabCase，組件命名規則也為 KebabCase

目錄結構：

|constants
|-- index.js
|-- role.js
|-- employee.js
例子： employee.js

export const EMPLOYEE_STATUS = {NORMAL: {value: 1,desc: '正常'},DISABLED: {value: 1,desc: '禁用'},DELETED: {value: 2,desc: '已刪除'} };export const EMPLOYEE_ACCOUNT_TYPE = {QQ: {value: 1,desc: 'QQ登錄'},WECHAT: {value: 2,desc: '微信登錄'},DINGDING: {value: 3,desc: '釘釘登錄'},USERNAME: {value: 4,desc: '用戶名密碼登錄'} };export default {EMPLOYEE_STATUS,EMPLOYEE_ACCOUNT_TYPE };

5) router 與 store 目錄
這兩個目錄一定要將業務進行拆分，不能放到一個 js 文件里。

router 盡量按照 views 中的結構保持一致

store 按照業務進行拆分不同的 js 文件

注釋說明

整理必須加注釋的地方

公共組件使用說明
api 目錄的接口 js 文件必須加注釋
store 中的 state, mutation, action 等必須加注釋
vue 文件中的 template 必須加注釋，若文件較大添加 start end 注釋
vue 文件的 methods，每個 method 必須添加注釋
vue 文件的 data, 非常見單詞要加注釋

其他

1) 盡量不要手動操作 DOM
因使用 vue 框架，所以在項目開發中盡量使用 vue 的數據驅動更新 DOM，盡量（不到萬不得已）不要手動操作 DOM，包括：增刪改 dom 元素、以及更改樣式、添加事件等。

2) 刪除無用代碼
因使用了 git/svn 等代碼版本工具，對于無用代碼必須及時刪除，例如：一些調試的 console 語句、無用的棄用功能代碼。

總結

以上是生活随笔為你收集整理的（七）Vue 项目规范的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

项目
Vue