項目介紹時怎麼介紹更有亮點？應屆前端該往什麼方向提升自己？

項目介紹

首先要介紹自己的項目，項目目标是什麼，比如：

目标是為開發中大型項目提供開箱即用的解決方案。包括二次封裝元件、utils、hooks、動态菜單、權限校驗、按鈕級别權限控制等功能。項目會使用前端較新的技術棧，可以作為項目的啟動模版，以幫助你快速搭建企業級中背景産品原型。也可以作為一個示例，用于學習vue3、vite、ts等主流技術。該項目會持續跟進最新技術，并将其應用在項目中。

簡單的介紹一下項目

編輯

添加圖檔注釋，不超過 140 字（可選）

文檔準備

準備一個文檔用于介紹項目常用配置，項目主題，樣式，元件等說明

需要掌握的基礎知識

介紹項目中使用到的技術，比如下面的舉例：

本項目需要一定前端基礎知識，請確定掌握 Vue 的基礎知識，以便能處理一些常見的問題。 建議在開發前先學一下以下内容，提前了解和學習這些知識，會對項目了解非常有幫助:

• Vue3 文檔
• Vue-RFCS
• Vue2 遷移到 3
• TypeScript
• Vue-router
• Ant-Design-Vue
• Es6
• Vitejs
• WindiCss

浏覽器支援

考慮到硬體支援等情況說明：

本地開發推薦使用Chrome 最新版浏覽器，不支援Chrome 80以下版本。

生産環境支援現代浏覽器，不支援 IE。

​

編輯切換為居中

項目規範

項目内內建了以下幾種代碼校驗方式

1. eslint 用于校驗代碼格式規範
2. commitlint 用于校驗 git 送出資訊規範
3. stylelint 用于校驗 css/less 規範
4. prettier 代碼格式化

ESLint

ESLint 是一個代碼規範和錯誤檢查工具，有以下幾個特性

• 所有東西都是可以插拔的。你可以調用任意的 rule api 或者 formatter api 去打包或者定義 rule or formatter。
• 任意的 rule 都是獨立的
• 沒有特定的 coding style，你可以自己配置

手動校驗代碼

執行下面代碼.能修複的會自動修複，不能修複的需要手動修改 yarn run lint:eslint

配置項

項目的 eslint 配置位于根目錄下 .eslintrc.js 内，可以根據團隊自行修改代碼規範

編輯器配合

推薦使用 vscode 進行開發，vscode 自帶 eslint 插件，可以自動修改一些錯誤。

同時項目内也自帶了 vscode eslint 配置，具體在 .vscode/setting.json 檔案夾内部。隻要使用 vscode 開發不用任何設定即可使用

CommitLint

在一個團隊中，每個人的 git 的 commit 資訊都不一樣，五花八門，沒有一個機制很難保證規範化，如何才能規範化呢？可能你想到的是 git 的 hook 機制，去寫 shell 腳本去實作。這當然可以，其實 JavaScript 有一個很好的工具可以實作這個模闆，它就是 commitlint（用于校驗 git 送出資訊規範）。

配置

commit-lint 的配置位于項目根目錄下 commitlint.config.js

Git 送出規範

• 參考 vue 規範 (Angular)
• feat 增加新功能
• fix 修複問題/BUG
• style 代碼風格相關無影響運作結果的
• perf 優化/性能提升
• refactor 重構
• revert 撤銷修改
• test 測試相關
• docs 文檔/注釋
• chore 依賴更新/腳手架配置修改等
• workflow 工作流改進
• ci 持續內建
• mod 不确定分類的修改
• wip 開發中
• types 類型修改

Stylelint

stylelint 用于校驗項目内部 css 的風格,加上編輯器的自動修複，可以很好的統一項目内部 css 風格

stylelint 配置位于根目錄下 stylelint.config.js

如果您使用的是 vscode 編輯器的話，隻需要安裝下面插件，即可在儲存的時候自動格式化檔案内部 css 樣式

插件

StyleLint

Prettier

prettier 可以用于統一項目代碼風格，統一的縮進，單雙引号，尾逗号等等風格

prettier 配置檔案位于項目根目錄下 prettier.config.js

如果您使用的是 vscode 編輯器的話，隻需要安裝下面插件，即可在儲存的時候自動格式化檔案内部 js 格式

目錄說明

說明目錄使用規範：

.
├── build # 打包腳本相關
├── mock # mock檔案夾
├── public # 公共靜态資源目錄
├── src # 主目錄
│   ├── api # 接口檔案
│   ├── assets # 資源檔案
│   │   ├── icons # icon sprite 圖示檔案夾
│   │   ├── images # 項目存放圖檔的檔案夾
│   │   └── svg # 項目存放svg圖檔的檔案夾
│   ├── components # 公共元件
│   ├── design # 樣式檔案
│   ├── directives # 指令
│   ├── enums # 枚舉/常量
│   ├── hooks # hook
│   │   ├── component # 元件相關hook
│   │   ├── core # 基礎hook
│   │   ├── event # 事件相關hook
│   │   ├── setting # 配置相關hook
│   │   └── web # web相關hook
│   ├── layouts # 布局檔案
│   │   ├── default # 預設布局
│   │   ├── iframe # iframe布局
│   │   └── page # 頁面布局
│   ├── locales # 多語言
│   ├── logics # 邏輯
│   ├── main.ts # 主入口
│   ├── router # 路由配置
│   ├── settings # 項目配置
│   │   ├── componentSetting.ts # 元件配置
│   │   ├── designSetting.ts # 樣式配置
│   │   ├── encryptionSetting.ts # 加密配置
│   │   ├── localeSetting.ts # 多語言配置
│   │   ├── projectSetting.ts # 項目配置
│   │   └── siteSetting.ts # 站點配置
│   ├── store # 資料倉庫
│   ├── utils # 工具類
│   └── views # 頁面
├── test # 測試
│   └── server # 測試用到的服務
│       ├── api # 測試伺服器
│       ├── upload # 測試上傳伺服器
│       └── websocket # 測試ws伺服器
├── types # 類型檔案
├── vite.config.ts # vite配置檔案
└── windi.config.ts # windcss配置檔案           

項目配置項

主要是提供不同環境的項目配置功能：

環境變量配置

項目的環境變量配置位于項目根目錄下的 .env、.env.development、.env.production

.env                # 在所有的環境中被載入 
.env.local          # 在所有的環境中被載入，但會被 git 忽略 
.env.[mode] # 隻在指定的模式中被載入 
.env.[mode].local   # 隻在指定的模式中被載入，但會被 git 忽略           

其它配置

1、元件預設參數配置、元件，分頁、彈窗等等、顯示、隐藏；

2、緩存配置

3、配置多語言資訊

4、主題色配置

5、css 字首設定

6、用于預設一些顔色數組

路由

路由主要以meta配置為主。

Meta 配置說明：比如：

1、外部頁面嵌套

2、外鍊

3、動态路由Tab自動關閉功能

4、這裡的icon配置，會同步到菜單

5、新增路由

6、Redirect

7、如何開啟頁面緩存、如何讓某個頁面不緩存

export interface RouteMeta {
  // 路由title  一般必填
  title: string;
  // 動态路由可打開Tab頁數
  dynamicLevel?: number;
  // 動态路由的實際Path, 即去除路由的動态部分;
  realPath?: string;
  // 是否忽略權限，隻在權限模式為Role的時候有效
  ignoreAuth?: boolean;
  // 可以通路的角色，隻在權限模式為Role的時候有效
  roles?: RoleEnum[];
  // 是否忽略KeepAlive緩存
  ignoreKeepAlive?: boolean;
  // 是否固定标簽
  affix?: boolean;
  // 圖示，也是菜單圖示
  icon?: string;
  // 内嵌iframe的位址
  frameSrc?: string;
  // 指定該路由切換的動畫名
  transitionName?: string;
  // 隐藏該路由在面包屑上面的顯示
  hideBreadcrumb?: boolean;
  // 如果該路由會攜帶參數，且需要在tab頁上面顯示。則需要設定為true
  carryParam?: boolean;
  // 隐藏所有子菜單
  hideChildrenInMenu?: boolean;
  // 目前激活的菜單。用于配置詳情頁時左側激活的菜單路徑
  currentActiveMenu?: string;
  // 目前路由不再标簽頁顯示
  hideTab?: boolean;
  // 目前路由不再菜單顯示
  hideMenu?: boolean;
  // 菜單排序，隻對第一級有效
  orderNo?: number;
  // 忽略路由。用于在ROUTE_MAPPING以及BACK權限模式下，生成對應的菜單而忽略路由。2.5.3以上版本有效
  ignoreRoute?: boolean;
  // 是否在子級菜單的完整path中忽略本級path。2.5.3以上版本有效
  hidePathForChildren?: boolean;
}           

權限

1. 通過使用者角色來過濾菜單(前端方式控制)，菜單和路由分開配置
2. 通過使用者角色來過濾菜單(前端方式控制)，菜單由路由配置自動生成
3. 通過背景來動态生成路由表(背景方式控制)

前端角色權限

實作原理: 在前端固定寫死路由的權限，指定路由有哪些權限可以檢視。隻初始化通用的路由，需要權限才能通路的路由沒有被加入路由表内。在登陸後或者其他方式擷取使用者角色後，通過角色去周遊路由表，擷取該角色可以通路的路由表，生成路由表，再通過 router.addRoutes 添加到路由執行個體，實作權限的過濾。

缺點: 權限相對不自由，如果背景改動角色，前台也需要跟着改動。适合角色較固定的系統

資料 mock&聯調

提供不同環境的聯調和測試功能

1、跨域處理

1、沒有跨域時的配置

2、跨域原了解析

2、接口請求

1. 頁面互動操作；
2. 調用統一管理的 api 請求函數；
3. 使用封裝的 axios.ts 發送請求；
4. 擷取服務端傳回資料
5. 更新 data；

接口統一存放于 src/api/ 下面管理

3、axios 配置

1、更改參數格式

2、多個接口位址

3、删除請求 URL 攜帶的時間戳參數

4、Mock 服務

Mock 資料是前端開發過程中必不可少的一環，是分離前後端開發的關鍵鍊路。通過預先跟伺服器端約定好的接口，模拟請求資料甚至邏輯，能夠讓前端開發獨立自主，不會被服務端的開發程序所阻塞。

本地 Mock

本地 mock 采用 Node.js 中間件進行參數攔截（不采用 mock.js 的原因是本地開發看不到請求參數和響應結果）。

線上 mock

由于該項目是一個展示類項目，線上也是用 mock 資料，是以在打包後同時也內建了 mock。通常項目線上一般為正式接口。

項目線上 mock 采用的是 mockjs 進行 mock 資料模拟。

元件注冊

提供元件注冊功能，豐富全局注冊，異步注冊等方式；

1、按需引入

2、全局注冊

3、全局按需注冊

樣式

主要介紹如何在項目中使用和規劃樣式檔案。

引入外部子產品

考慮2個點：

1、全局使用

2、局部使用

建構&部署

建構

項目開發完成之後，執行以下指令進行建構

yarn build           

建構打包成功之後，會在根目錄生成 dist 檔案夾，裡面就是建構打包好的檔案

舊版浏覽器相容

在 .env.production 内

設定 LEGACY=true 即可打包出相容舊版浏覽器的代碼

LEGACY = true           

預覽

釋出之前可以在本地進行預覽，有多種方式，這裡介紹兩種

不能直接打開建構後的 html 檔案

• 使用項目自定的指令進行預覽(推薦)

先打包在進行預覽 yarn preview

直接預覽本地 dist 檔案目錄 yarn preview:dist

壓縮

1、開啟 gzip 壓縮（開啟 gzip，并配合 nginx 的gzip_static功能可以大大加快頁面通路速度）

2、開啟 brotli 壓縮（brotli 是比 gzip 壓縮率更高的算法，可以與 gzip 共存不會沖突，需要 nginx 安裝指定子產品并開啟即可。）

釋出

簡單的部署隻需要将最終生成的靜态檔案，dist 檔案夾的靜态檔案釋出到你的 cdn 或者靜态伺服器即可，需要注意的是其中的 index.html 通常會是你背景服務的入口頁面，在确定了 js 和 css 的靜态之後可能需要改變頁面的引入路徑。

前端路由與服務端的結合

項目前端路由使用的是 vue-router，是以你可以選擇兩種方式：history 和 hash。

• hash 預設會在 url 後面拼接#
• history 則不會，不過 history 需要伺服器配合