腳本之家服務器常用軟件

快捷導航

Vue3?PC端頁面開發(fā)規(guī)范及說明

更新時間：2022年12月09日 10:16:43 作者：Janeb1018

這篇文章主要介紹了Vue3?PC端頁面開發(fā)規(guī)范及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

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

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

軟件	版本
node.js	v16.14.0
vue	@vue/cli 5.0.1

UI 框架：

UI框架	版本
Element Plus	^2.0.5
PrimeVue	^3.12.1

其他組件：

其他組件	版本
axios	^0.26.1
moment	^2.29.1
sweetalert	^2.1.2

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

項目依賴代碼：（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ā)是指項目經過構建后生成的是多個頁面，也就是 Vue 的多入口開發(fā)。

頁面

組件的容器。

組件

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

路由組件

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

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

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.字體規(guī)范

參照如下表格：

位置	加粗	顏色	大小
主標題	加粗	#666	16px
次級標題	加粗	#666	14px
小標題	加粗	#666	12px
正文		#666	14px
輔助文字		#999	12px
失效文字		#ccc	12px
鏈接文字		#2db7f5	12px

3.全局邊距

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

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

4.內容邊距

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

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

3.3工程目錄結構

說明：

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

2.一個頁面至少由三個文件構成：html、js、vue，如果把該頁面作為SPA應用來開發(fā)，則需要在對應的模塊中增加頁面名稱的目錄，并建立 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.必須進行注釋的情況：

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

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

示例：

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

3.5編碼規(guī)范

盡量按照ESLint格式要求編寫代碼
使用ES6風格編碼源碼

定義變量使用let

定義常量使用const

使用export,import 模塊化
避免 this.$parent
無需將 this 賦值給 component 變量
調試信息console.log() 使用完及時刪除

3.6命名規(guī)范

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

普通變量	駝峰式命名
類變量	駝峰式命名	itemOf[數據表名]oldItemOf[數據表名]
類屬性	下劃線命名	與數據表字段名保持一致
查詢類變量	駝峰式命名	queryFieldOf[數據表名]
查詢類屬性	駝峰式命名	query[字段名]
表格列表	駝峰式命名	tableDataOf[數據表名]
數據分頁	駝峰式命名	totalOf[數據表名] currentPageOf[數據表名] pageSizeOf[數據表名]
對話框	駝峰式命名	titleOf[數據表名] dialogVisibleOf[數據表名]
選項	駝峰式命名	[業(yè)務關鍵字]Options
函數	下劃線命名法
事件函數	下劃線命名法	[UI組件名]_[UI組件類型]_[事件]ed 如：city_select_changed
函數參數	駝峰式命名
組件封裝	駝峰式命名	須根據封裝的類型進行合理命名對話框采用Dialog，彈出框采用Popover等；格式：[動作][業(yè)務][類型]，如：EditorContractDialog
路由path	下劃線命名法	全部使用小寫字母
路由name	駝峰式命名

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

3.7數據校驗與刪除

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

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

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

彈出提示信息示例：

// 帶有確認按鈕
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文件中實現的，視業(yè)務邏輯復雜度進行開發(fā)，如果預計的代碼量超過500行，則進行拆分，將列表、對話框、彈出框、Tab頁內容等進行獨立開發(fā)。

組件封裝規(guī)范：

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

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

初始化函數命名：

init([組件參數])

回調事件命名：

call_back_[事件結果名稱]

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

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

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

3.12服務代理

服務代理規(guī)定訪問后端接口的配置方法；使用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
      }
    }
  },