Vue3 PC端頁面開發規范

1.開發環境

Vue開發環境：

UI 框架：

其他組件：

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

項目依賴代碼：（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.名稱解釋

• 多頁面開發

多頁面開發是指項目經過構建后生成的是多個頁面，也就是 Vue 的多入口開發。

• 頁面

組件的容器。

• 組件

頁面組成的一部分，可以多個頁面復用的代碼。

• 路由組件

通過路由來展現的組件，只有把一個頁面當作一個SPA應用的情況下，才會存在路由組件。

3.開發規范

3.1原則

1.PC端項目全部采用多頁面方式；

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

3.2設計原則

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.字體規范

參照如下表格：

3.全局邊距

全局邊距是指頁面內容到屏幕邊緣的距離，整個應用的界面都應該以此來進行規范，以達到頁面整體視覺效果的統一。全局邊距的設置可以更好的引導用戶豎向向下閱讀。

在實際應用中應該根據不同的產品氣質采用不同的邊距，讓邊距成為界面的一種設計語言，常用的全局邊距有32px、30px、24px、12px。

4.內容邊距

頁面中不同的內容之間的間距。

由于我們使用開源UI組件進行開發，在內容邊距的設置上保持開源UI組件自身的默認設置即可。

3.3工程目錄結構

工程目錄結構示意圖

說明：

1.module 目錄中存放業務的對應頁面，要嚴格按照業務系統的模塊劃分進行管理。

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

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

構建腳本示例：

vue.config.js

pages: {
    index: {
      // 入口文件，相當于單頁面的 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 項設置為帶有模塊名稱的路徑名，否則會構建到根目錄下

3.4注釋

1.必須進行注釋的情況：

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

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

示例：

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

3.5編碼規范

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

• 使用ES6風格編碼源碼
  • 定義變量使用let
  • 定義常量使用const

• 使用export,import 模塊化

• 避免 this.$parent

• 無需將 this 賦值給 component 變量

• 調試信息console.log() 使用完及時刪除

3.6命名規范

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

數據表名：是數據表設計時命名的，在此處的數據表名不包含前綴。

3.7數據校驗與刪除

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

2.數據刪除一律彈出確認對話框要求用戶確認后執行刪除動作；

3.彈出提示信息或確認信息一律使用 sweetalert 組件進行操作，主要原因是其代碼量比較??；

彈出提示信息示例：

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

彈出確認信息示例：

swal({
        title: "確認",
        text: "確實要刪除您選擇的數據嗎？",
        icon: "warning",
        buttons: ["取消", "確定"],
        dangerMode: true,
      }).then((willDelete) => {
        if (willDelete) {
          // ...
        }
      });

3.8日期數據

在數據提交時，日期時間型數據必須轉換為字符串，格式：

日期格式：YYYY-MM-DD

時間格式：HH24:MI:SS

時間戳格式：YYYY-MM-DD HH24:MI:SS

日期格式轉換可以直接使用封裝好的 utils.js 中的函數進行處理：

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

3.9Rest請求

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

前端在進行Rest請求時，一律調用封裝號的 utils.js 中的postRequest函數進行請求。

postRequest (url, data)

對于無輸入參數的請求，一律將data設置為{tmp: null}進行請求

3.10表單數據（類屬性）初始化

• 數組初始化為[]；

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

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

3.11組件封裝

公共組件必須封裝為獨立的組件；

對于既可以采用封裝的方式來實現，也可以在一個獨立的vue文件中實現的，視業務邏輯復雜度進行開發，如果預計的代碼量超過500行，則進行拆分，將列表、對話框、彈出框、Tab頁內容等進行獨立開發。

組件封裝規范：

原則上不使用組件屬性，如果需要屬性進行分類則可以使用屬性，但需要注意，組件屬性不能修改其值，只負責單項傳遞數據，原則上不使用組件屬性雙向傳遞數據

組件封裝需實現一個初始化函數和0個或n個回調事件：

初始化函數命名：

init([組件參數])

回調事件命名：

call_back_[事件結果名稱]

如果只有一個單一的回調事件必須省略[事件結果名稱]，只使用call_back

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

觸發回調：emit('call_back')

3.12服務代理

服務代理規定訪問后端接口的配置方法；使用webpack配置中的proxy項來實現，不允許將訪問地址寫成固定的字符串捆綁到請求中；

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組件導入

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