Vue3 PC端頁面開發(fā)規(guī)范

1.開發(fā)環(huán)境

Vue開發(fā)環(huán)境：

UI 框架：

其他組件：

以上列出的是開發(fā)所需要的重要部分的軟件及其版本號。

項(xiàng)目依賴代碼：（package.json）

"dependencies": {
    "@element-plus/icons-vue": "^1.1.1",
    "axios": "^0.26.1",
    "core-js": "^3.8.3",
    "element-plus": "^2.0.5",
    "jsencrypt": "^3.2.1",
    "mitt": "^3.0.0",
    "moment": "^2.29.1",
    "primeflex": "^3.1.3",
    "primeicons": "^5.0.0",
    "primevue": "^3.12.1",
    "sweetalert": "^2.1.2",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "unplugin-auto-import": "^0.6.1",
    "unplugin-vue-components": "^0.17.21"
  }

2.名稱解釋

• 多頁面開發(fā)

多頁面開發(fā)是指項(xiàng)目經(jīng)過構(gòu)建后生成的是多個(gè)頁面，也就是 Vue 的多入口開發(fā)。

• 頁面

組件的容器。

• 組件

頁面組成的一部分，可以多個(gè)頁面復(fù)用的代碼。

• 路由組件

通過路由來展現(xiàn)的組件，只有把一個(gè)頁面當(dāng)作一個(gè)SPA應(yīng)用的情況下，才會存在路由組件。

3.開發(fā)規(guī)范

3.1原則

1.PC端項(xiàng)目全部采用多頁面方式；

2.UI組件以使用 PrimeVue 為主，使用 Element Plus為輔，其他 UI 一律不允許使用；

3.2設(shè)計(jì)原則

1.字體家族

font-family:ui-sans-serif,system-ui,-Apple-system,BlinkmacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

2.字體規(guī)范

參照如下表格：

3.全局邊距

全局邊距是指頁面內(nèi)容到屏幕邊緣的距離，整個(gè)應(yīng)用的界面都應(yīng)該以此來進(jìn)行規(guī)范，以達(dá)到頁面整體視覺效果的統(tǒng)一。全局邊距的設(shè)置可以更好的引導(dǎo)用戶豎向向下閱讀。

在實(shí)際應(yīng)用中應(yīng)該根據(jù)不同的產(chǎn)品氣質(zhì)采用不同的邊距，讓邊距成為界面的一種設(shè)計(jì)語言，常用的全局邊距有32px、30px、24px、12px。

4.內(nèi)容邊距

頁面中不同的內(nèi)容之間的間距。

由于我們使用開源UI組件進(jìn)行開發(fā)，在內(nèi)容邊距的設(shè)置上保持開源UI組件自身的默認(rèn)設(shè)置即可。

3.3工程目錄結(jié)構(gòu)

工程目錄結(jié)構(gòu)示意圖

說明：

1.module 目錄中存放業(yè)務(wù)的對應(yīng)頁面，要嚴(yán)格按照業(yè)務(wù)系統(tǒng)的模塊劃分進(jìn)行管理。

2.一個(gè)頁面至少由三個(gè)文件構(gòu)成：html、js、vue，如果把該頁面作為SPA應(yīng)用來開發(fā)，則需要在對應(yīng)的模塊中增加頁面名稱的目錄，并建立 components、router 目錄用于存放組件和路由。

3.在 module 目錄下只能存在兩個(gè)頁面：登錄頁 index 和登錄后首頁（導(dǎo)航框架頁）major。

構(gòu)建腳本示例：

vue.config.js

pages: {
    index: {
      // 入口文件，相當(dāng)于單頁面的 main.js
      entry: 'src/module/index.js',
      // 模板文件
      template: 'src/module/index.html',
      // 編譯后 dist 目錄下輸出的文件，可以包含子目錄
      filename: 'index.html'
    },
    major: {
      entry: 'src/module/major.js',
      template: 'src/module/major.html',
      filename: 'major.html'
    },
    頁面名稱: {
      entry: 'src/module/模塊名稱/頁面名稱.js',
      template: 'src/module/模塊名稱/頁面名稱.html',
      filename: '/模塊名稱/頁面名稱.html'
    },
    ......
  }

說明：

子頁面一定要將 filename 項(xiàng)設(shè)置為帶有模塊名稱的路徑名，否則會構(gòu)建到根目錄下

3.4注釋

1.必須進(jìn)行注釋的情況：

• 公共組件使用說明
• 各組件中重要函數(shù)或者類說明
• 復(fù)雜的業(yè)務(wù)邏輯處理說明
• 特殊情況的代碼處理說明，對于代碼中特殊用途的變量、使用了某種算法或思路等需要進(jìn)行注釋描述

2.單行注釋 普通方法一般使用單行注釋// 來說明該方法主要作用 3.多行注釋 組件使用說明，和調(diào)用說明

示例：

<!--公用組件：組件名稱
/**
* 組件名稱
* @module 組件存放位置
* @desc 組件描述 
* @author 組件作者
* @date 2017年12月05日17:22:43
* @param 參數(shù)說明
* @param 參數(shù)說明
* @emit 觸發(fā)事件
* @return 返回值
* @example 調(diào)用示例
* 
*/
-->

3.5編碼規(guī)范

盡量按照ESLint格式要求編寫代碼

• 使用ES6風(fēng)格編碼源碼
  • 定義變量使用let
  • 定義常量使用const

• 使用export,import 模塊化

• 避免 this.$parent

• 無需將 this 賦值給 component 變量

• 調(diào)試信息console.log() 使用完及時(shí)刪除

3.6命名規(guī)范

本規(guī)范使用駝峰式命名(camelCase)和下劃線命名法(UnderScoreCase)

數(shù)據(jù)表名：是數(shù)據(jù)表設(shè)計(jì)時(shí)命名的，在此處的數(shù)據(jù)表名不包含前綴。

3.7數(shù)據(jù)校驗(yàn)與刪除

1.數(shù)據(jù)校驗(yàn)一律不允許使用任何校驗(yàn)框架來實(shí)現(xiàn)，采用if語句硬編碼方式來實(shí)現(xiàn)，不符合條件的數(shù)據(jù)彈出對話框進(jìn)行提示；

2.數(shù)據(jù)刪除一律彈出確認(rèn)對話框要求用戶確認(rèn)后執(zhí)行刪除動(dòng)作；

3.彈出提示信息或確認(rèn)信息一律使用 sweetalert 組件進(jìn)行操作，主要原因是其代碼量比較小；

彈出提示信息示例：

// 帶有確認(rèn)按鈕
swal('錯(cuò)誤', '請選擇要編輯的數(shù)據(jù)!', 'error')
// 停留1秒后自動(dòng)消失
swal({title: "提示!", text: "操作成功!", icon: "success", button: false, timer: 1000});
swal({title: "提示!", text: "操作失敗!", icon: "error", button: false, timer: 1000});

彈出確認(rèn)信息示例：

swal({
        title: "確認(rèn)",
        text: "確實(shí)要?jiǎng)h除您選擇的數(shù)據(jù)嗎？",
        icon: "warning",
        buttons: ["取消", "確定"],
        dangerMode: true,
      }).then((willDelete) => {
        if (willDelete) {
          // ...
        }
      });

3.8日期數(shù)據(jù)

在數(shù)據(jù)提交時(shí)，日期時(shí)間型數(shù)據(jù)必須轉(zhuǎn)換為字符串，格式：

日期格式：YYYY-MM-DD

時(shí)間格式：HH24:MI:SS

時(shí)間戳格式：YYYY-MM-DD HH24:MI:SS

日期格式轉(zhuǎn)換可以直接使用封裝好的 utils.js 中的函數(shù)進(jìn)行處理：

dateToString (date, format)
stringToDate (sDate, format)

3.9Rest請求

產(chǎn)品的Rest請求只使用Post和Get，Get請求只適用于文件下載，其余一律使用Post請求。

前端在進(jìn)行Rest請求時(shí)，一律調(diào)用封裝號的 utils.js 中的postRequest函數(shù)進(jìn)行請求。

postRequest (url, data)

對于無輸入?yún)?shù)的請求，一律將data設(shè)置為{tmp: null}進(jìn)行請求

3.10表單數(shù)據(jù)（類屬性）初始化

• 數(shù)組初始化為[]；

• Boolean類型初始化為true|false；

• 其他類型均須初始化為null

3.11組件封裝

公共組件必須封裝為獨(dú)立的組件；

對于既可以采用封裝的方式來實(shí)現(xiàn)，也可以在一個(gè)獨(dú)立的vue文件中實(shí)現(xiàn)的，視業(yè)務(wù)邏輯復(fù)雜度進(jìn)行開發(fā)，如果預(yù)計(jì)的代碼量超過500行，則進(jìn)行拆分，將列表、對話框、彈出框、Tab頁內(nèi)容等進(jìn)行獨(dú)立開發(fā)。

組件封裝規(guī)范：

原則上不使用組件屬性，如果需要屬性進(jìn)行分類則可以使用屬性，但需要注意，組件屬性不能修改其值，只負(fù)責(zé)單項(xiàng)傳遞數(shù)據(jù)，原則上不使用組件屬性雙向傳遞數(shù)據(jù)

組件封裝需實(shí)現(xiàn)一個(gè)初始化函數(shù)和0個(gè)或n個(gè)回調(diào)事件：

初始化函數(shù)命名：

init([組件參數(shù)])

回調(diào)事件命名：

call_back_[事件結(jié)果名稱]

如果只有一個(gè)單一的回調(diào)事件必須省略[事件結(jié)果名稱]，只使用call_back

組件調(diào)用：this.$refs.[ref_name].init()

觸發(fā)回調(diào)：emit('call_back')

3.12服務(wù)代理

服務(wù)代理規(guī)定訪問后端接口的配置方法；使用webpack配置中的proxy項(xiàng)來實(shí)現(xiàn)，不允許將訪問地址寫成固定的字符串捆綁到請求中；

vue.config.js

devServer: {
    proxy: {
      '/oth_api': {
        target: 'http://127.0.0.1:8000/',
        changeOrigin: true
      },
      'qybackstage_api': {
        target: 'http://127.0.0.1:8001/',
        changeOrigin: true
      }
    }
  },

3.13UI組件導(dǎo)入

UI組件的引入必須使用按需導(dǎo)入的方法，不允許一次性全部引入。