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

目介紹

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

目標是為開發中大型項目提供開箱即用的解決方案。包括二次封裝組件、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。

編輯切換為居中

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

項目規范

項目內集成了以下幾種代碼校驗方式

eslint 用于校驗代碼格式規范
commitlint 用于校驗 git 提交信息規范
stylelint 用于校驗 css/less 規范
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 格式

插件

Prettier

目錄說明

說明目錄使用規范：

.
├── 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;
}

權限

通過用戶角色來過濾菜單(前端方式控制)，菜單和路由分開配置
通過用戶角色來過濾菜單(前端方式控制)，菜單由路由配置自動生成
通過后臺來動態生成路由表(后臺方式控制)

前端角色權限

實現原理: 在前端固定寫死路由的權限，指定路由有哪些權限可以查看。只初始化通用的路由，需要權限才能訪問的路由沒有被加入路由表內。在登陸后或者其他方式獲取用戶角色后，通過角色去遍歷路由表，獲取該角色可以訪問的路由表，生成路由表，再通過 router.addRoutes 添加到路由實例，實現權限的過濾。

缺點: 權限相對不自由，如果后臺改動角色，前臺也需要跟著改動。適合角色較固定的系統

數據 mock&聯調

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

1、跨域處理

1、沒有跨域時的配置

2、跨域原理解析

2、接口請求

頁面交互操作；
調用統一管理的 api 請求函數；
使用封裝的 axios.ts 發送請求；
獲取服務端返回數據
更新 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 需要服務器配合

高興鐵鐵們能來看html網頁設計第二期~~~~撒花~~~~~

哎呀呀~實在是抱歉備注標簽我記錯了QAQ

這個才是備注標簽不是//

首先我們先來學習上節課留下的劇透，分別是:

1.標題標簽h1~h6

有人就說了標題標簽上次劇透不就只有h1標簽嗎?

嘿嘿，其實他還有兄弟姐妹啦~

看圖，代碼是從上往下從左往右執行的請記住這個順序哦~

還有,左邊是代碼右邊是網頁上面的效果哦~

源代碼:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>1</h1>

<h2>2</h2>

<h3>3</h3>

<h4>4</h4>

<h5>5</h5>

<h6>6</h6>

</body>

</html>

如圖所示，h1標簽是最大的，h6標簽是最小的

是不是很簡單呀,現在已經學會了一個知識點了哦~

2.段落標簽 p標簽

源代碼:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>第一條p標簽</p>

<p>第二條p標簽</p>

<p>第三條p標簽</p>

</body>

</html>

3.鏈接標簽 a標簽

鏈接標簽是什么?顧名思義就是一個鏈接看代碼：

href是什么東西啊？是a標簽的屬性啦~里面用來輸入你需要跳轉到的網頁的鏈接

屬性里面的東西是不會出現在網頁上面的出現的只有在a標簽里面的內容哦

當我點擊百度這兩個字后就給我跳轉到了我們href屬性里面的https://www.baidu.com

當然我們也可以跳轉到我們自己制作的網頁上面但要求是同一個項目下面的網頁

是不是很有趣~

看視頻:

視頻中我們點擊鏈接后就跳轉到了山這個網頁出現了一張山的圖片，是不是有點小意思~

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<a href="new_file3.html">跳轉到山的網頁</a>

</body>

</html>

4.圖像標簽 img標簽

圖像標簽標簽如其意，就是用來上傳圖像的一個標簽~~

我們這里介紹一下img的兩個屬性:

src就是用來放圖片的地址的，他會根據地址去找圖片然后把圖片放到網頁上面。

alt有什么用啊就是當圖片顯示失敗的時候就會顯示alt里面的文字

看視頻:

我們把圖片的地址破壞后，就會顯示一個圖片錯誤的圖標和alt里面的內容

怎么拖圖片到img文件下，老師~~~我不知道

看視頻

嘿嘿就直接把文件拖進來就ok了是不是很簡單~

okk，好快啊怎么一下就學完了今天的知識點~~~

嘻嘻今天可是有作業的~

請根據下面的網頁仿寫一下:

完成后作業發再評論區哦，有什么不懂的可以留言包回答的。

加油呀，每天學一點爭取做出屬于自己的一個網頁~

上一期

ni-app 是公司常用的一個框架，隨著 vue3 的普及，好多公司的項目都已經開始使用 vue3 + uni-app + vite 開發項目，順手記錄和分享一下我在這過程中遇到的問題。

一、npx 與 npm 區別

npm 都很熟，可是與 npm 如此相似的 npx 是干嘛的呢？我們為甚要介紹 npx ?

由于 uni-app 官方提供創建命令使用的是 npx，所以我們先來了解下 npx 是干什么的？它與 npm 的區別。

npx 是 npm 的高級版本，它從 npm v5.2 版本開始引入的，與 npm 綁定在一起，無需額外安裝，具有更大的功能。npx 是 npm exec 的別名，如果沒有時，可以手動：npm install -g npx 進行安裝。

區別：

npm 只能通過 package.json 里定義然后執行命令，npx 可以直接執行 node_module 包中的命令。
npx 可以指定 node 、命令的版本，解決不同項目使用不同版本的命令問題。
臨時安裝可執行依賴包，不用全局安裝，也不用擔心長期的污染。

二、使用 Vue3/Vite 版創建項目

2.1、創建 js 開發的項目：

npx degit dcloudio/uni-preset-vue#vite my-vue3-js

執行命令后會自動創建項目，然后執行：

cd my-vue3-js  // 進入my-vue3-js項目

執行：

npm install

依賴下載完成之后，就可以使用命令：

npm run dev:h5

啟動網頁服務。至此，項目就創建完成，并可進行預覽：

2.2、創建以 typeScript 開發的項目

創建命令：

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

回車開始創建的時候會報錯：could not fetch remote https://github.com/dcloudio/uni-prset-vue，由于網絡或者域名攔截引起的錯誤。

可以直接打開 github 地址：https://github.com/dcloudio/uni-preset-vue

或者 gitee 下載地址：https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip

下載 zip 壓縮包。

解壓之后，運行：

npm install

安裝依賴完成之后，可以使用：

npm run dev:h5

就可以正常運行項目了。

如果不熟悉 uni-app 項目的同學，可以自己在官網看看它的運行命令都有哪些以及它們的意義。

官方創建文檔地址：https://uniapp.dcloud.io/quickstart-cli.html#%E5%88%9B%E5%BB%BAuni-app

三、項目結構及作用

以 uni-app + vue3 + vite + ts 項目為例，項目結構目錄如圖：

index.html 首頁入口文件。
package.json 項目配置文件。
tsconfig.json typescript 配置文件。
vite.config.ts vite 的配置文件。

src 存放開發資源文件，基本要做的事情都在這個目錄內，里面又包含了幾個目錄文件：

pages 存放所有頁面文件，我們創建的頁面組件都放入該文件夾。
static 存放靜態資源的文件夾。
App.vue 頁面入口文件，所有頁面都在 App.vue 下進行切換。
env.d.ts 第三方模塊的類型聲明文件。
main.ts 項目入口文件，因為使用 ts 語法，所以后綴是 .ts
mainfest.json 應用配置文件，用于指定應用名稱、圖標、權限等。
pages.json 全局配置文件，可以配置頁面文件路徑、窗口樣式、原生的導航欄、底部tab欄等。
uni.scss 是uni-app的樣式包，在其他文件中可以快速引用樣式包內的樣式。

在線咨詢

上一篇：分享8個難忘的HTML5炫酷動畫
下一篇：通過html2canvas+jspdf將html頁面生成PDF下載

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

目介紹

文檔準備

需要掌握的基礎知識

瀏覽器支持

項目規范

ESLint

手動校驗代碼

配置項

編輯器配合

CommitLint

配置

Git 提交規范

Stylelint

配置

編輯器配合

Prettier

配置

編輯器配合

目錄說明

項目配置項

環境變量配置

其它配置

路由

權限

前端角色權限

數據 mock&聯調

1、跨域處理

2、接口請求

3、axios 配置

4、Mock 服務

本地 Mock

線上 mock

組件注冊

樣式

引入外部模塊

構建&部署

構建

舊版瀏覽器兼容

預覽

壓縮

發布

前端路由與服務端的結合

1.標題標簽h1~h6

2.段落標簽 p標簽

3.鏈接標簽 a標簽

4.圖像標簽 img標簽

一、npx 與 npm 區別

二、使用 Vue3/Vite 版創建項目

三、項目結構及作用

您的項目需求

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

1、跨域處理

2、接口請求

3、axios 配置

三、項目結構及作用