參考課程:

【黑馬程序員 Vue2+Vue3基礎入門到實戰項目】

[https://www.bilibili.com/video/BV1HV4y1a7n4]

@ZZHow(ZZHow1024)

項目收獲

• Vue3 composition API
• Pinia / Pinia 持久化處理
• Element Plus（表單校驗，表格處理，組件封裝）
• pnpm 包管理升級
• Eslint + prettier 更規范的配置
• husky（Git hooks 工具）代碼提交之前，進行校驗
• 請求模塊設計
• VueRouter4 路由設計

創建項目

• pnpm 包管理器

  • 官網：

  pnpm - 速度快、節省磁盤空間的軟件包管理器 | pnpm中文文檔 | pnpm中文網

  • 優勢：比同類工具快 2 倍左右、節省磁盤空間等。

  • 安裝 pnpm：npm install -g pnpm

  • 創建項目：pnpm create vue

  • npm、yarn 和 pnpm 命令對比：

    npm	yarn	pnpm
    npm install	yarn	pnpm install
    npm install axios	yarn add axios	pnpm add axios
    npm install axios -D	yarn add axios-D	pnpm add axios -D
    npm uninstall axios	yarn remove axios	pnpm remove axios
    npm run dev	yarn dev	pnpm dev

• 使用 pnpm 創建項目

  1. pnpm create vue
  2. 選擇 Add Vue Router for Single Page Application development、Add Pinia for state management、Add ESLint for code quality 和 Add Prettier for code formatting。
  3. 進入項目目錄，安裝依賴，啟動項目。

• Eslint 配置代碼風格

  • 配置文件：.eslintrc.cjs

    rules: {'prettier/prettier': ['warn',{singleQuote: true, // 單引號semi: false, // 無分號printWidth: 80, // 每行寬度至多80字符trailingComma: 'none', // 不加對象|數組最后逗號endOfLine: 'auto' // 換行符號不限制（win mac 不一致）}],'vue/multi-word-component-names': ['warn',{ignores: ['index'] // vue組件名稱多單詞組成（忽略index.vue）}],'vue/no-setup-props-destructure': ['off'], // 關閉 props 解構的校驗// 💡 添加未定義變量錯誤提示，create-vue@3.6.3 關閉，這里加上是為了支持下一個章節演示。'no-undef': 'error'
    }
    

    • Prettier 風格配置

      • 官網：

      Prettier · Opinionated Code Formatter

      1. 單引號
      2. 不使用分號
      3. 每行寬度至多 80 字符
      4. 不加對象，數組最后逗號
      5. 換行符號不限制（Windows 和 macOS 不一致）

    • Vue 組件名稱多單詞組成（忽略 index.vue）

    • props 解構（關閉）

• 配置代碼檢查工作流

  • 提交前做代碼檢查

    1. 初始化 Git 倉庫，執行 git init。

    2. 初始化 Husky 工具配置。

       • 執行 pnpm dlx husky-init && pnpm install
       • 官網：

       Husky

    3. 修改 .husky/pre-commit 文件。

       • 將 npm test 改為 pnpm lint
    • 問題：默認進行的是全量檢查，有耗時問題和歷史問題。
  • 暫存區 ESLint 校驗

    1. 安裝 lint-staged 包，執行 pnpm ilint-staged -D。

    2. package.json 配置 lint-staged 命令。

       {// ... 省略 ..."lint-staged": {"*.{js,ts,vue}": ["eslint --fix"]}
       }{"scripts": {// ... 省略 ..."lint-staged": "lint-staged"}
       }
       

    3. 修改 .husky/pre-commit 文件。

       • 將 pnpm lint 改為 pnpm lint-staged。

• 目錄調整

  • 默認生成的目錄結構不滿足我們的開發需求，需要做一些自定義改動。
  • 步驟：
    1. 刪除一些初始化的默認文件。
    2. 修改剩余代碼內容。
    3. 新增調整我們需要的目錄結構。
    4. 拷貝全局樣式和圖片，安裝預處理器支持。

前置知識

• Vue Router 4

  • 路由初始化
    1. 創建路由實例由 createRouter 實現。
    2. 路由模式：
       1. history 模式使用 createWebHistory()。
       2. hash 模式使用 createWebHashHistory()。
       3. 參數是基礎路徑，默認 /，import.meta.env.BASE_URL 是 Vite 的環境變量。

• Vite 環境變量

  • 官方文檔：

  環境變量和模式

• Element Plus 組件庫

  • 按需引入 Element Plus

    1. 安裝：pnpm add element-plus

    2. 配置按需導入。

       • 官方文檔：

       快速開始 | Element Plus

    3. 直接使用組件。

  • 彩蛋：默認 components 下的文件也會被自動注冊。

• Pinia 構建倉庫和持久化

  • 狀態管理 - Pinia
    • 用戶倉庫 - User
    • 持久化 - pinia-plugin-persistedstate
  • 統一管理
    • Pinia 獨立維護
    • 倉庫統一導出

• 請求工具設計

  • Axios 配置
    • 創建 Axios 實例：基準地址，超時時間。
    • 請求攔截器：攜帶 Token。
    • 響應攔截器：業務失敗處理，摘取核心響應數據，401 處理。

• 整體路由設計

  • 登錄 - 一級路由
  • 架子 - 一級路由
    • 文章分類 - 二級路由
    • 文章管理 - 二級路由
    • 基本資料 - 二級路由
    • 更換頭像 - 二級路由
    • 重置密碼 - 二級路由

項目開發

• 登錄注冊

  • 需求：
    1. 注冊登錄 靜態結構&基本切換
    2. 注冊功能（校驗 ＋ 注冊）
    3. 登錄功能（校驗 ＋ 登錄 ＋ 存 Token）
  • 普通校驗：
    1. el-form → :model="nuleForm"，綁定的整個 form 的數據對象{ xxx, xxx, xxx }。
    2. el-form → :rules="rules"，綁定的整個 rules 規則對象 { xxx, xxx, xxx }。
    3. 表單元素 → v-model="ruleForm.xxx"，給表單元素，綁定 form 的子屬性。
    4. el-form-item → prop 配置生效的是哪個校驗規則（和 rules 中的字段要對應）。
  • 自定義校驗（校驗函數）：
    • validator: (rule, value, callback) => {}
      1. rule：當前校驗規則相關的信息。
      2. value：所校驗的表單元素目前的表單值。
      3. callback：無論成功還是失敗，都需要 callback 回調。
    • callback()：校驗成功。
    • callback (new Error (錯誤信息)) 校驗失敗。
  • 預校驗
    • await form.value.validate() ，能等到說明校驗通過。
  • ESLint 全局變量名

    • 打開文件 .eslintrc.cjs

      globals: {ElMessage: 'readonly',ElMessageBox: 'readonly',ElLoading: 'readonly'
      }
      

• 首頁

  • layout 架子
    • 需求：
      • 基本架子拆解（菜單組件的使用）。
      • 登錄訪問攔截。
      • 用戶基本信息獲取&渲染。
      • 退出功能 [element-plus 確認框]。
    • el-menu 整個菜單組件：
      • :default-active="$route.path"：配置默認高亮的菜單項。
      • router 選項開啟，el-menu-ithm 的 index 就是點擊跳轉的路徑。
    • el-menu-item 菜單項：
      • index="/article/channel"：配置的是訪問的跳轉路徑。
    • Vue Router 4：
      • 根據返回值決定，是放行還是攔截。
      • 返回值：
        • undefined / true：直接放行。
        • false：攔回 from 的地址頁面。
        • 具體路徑 或 路徑對象：攔截到對應的地址。
  • 文章分類頁面 - [element-plus 表格]
    • 需求：
      • 基本架子 - PageContainer 封裝。
      • 文章分類渲染 & loading 處理。
      • 文章分類添加編輯[element-plus 彈層]。
      • 文章分類刪除。
  • 文章管理頁面 - [element-plus 進階]
    • 需求：
      • 文章列表渲染（帶搜索 & 帶分頁）。
      • 添加文章（糖屜 ＆ 文件上傳 ＆ 富文本）。
      • 編輯文章（共用抽屜）。
      • 刪除文章。

• 中文國際化處理

  • 使用 <el-config-providen :locale="zh-cn"> 將需要配置的組件包裹起來
  • 導入中文包：import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

• 富文本編輯器 [Vue-Quill]

  • 官網：

    VueQuill

  • 使用步驟：

    1. 安裝：pnpm add @vueup/vue-quill@latest

    2. 注冊成局部組件

       import { QuillEditor } from '@vueup/vue-quill'
       import '@vueup/vue-quill/dist/vue-quill.snow.css'
       

    3. 頁面中使用綁定

       <div class="editor"><quill-editortheme="snow"v-model:content="formModel.content"contentType="html"></quill-editor>
       </div>
       

    4. 樣式美化

       .editor {width: 100%;:deep(.ql-editor) {min-height: 200px;}
       }
       

• 個人中心

  • 基本資料。
  • 更換頭像。
  • 重置密碼。

項目演示

• 在線演示：https://fe-bigevent-web.itheima.net/login
• 接口文檔：https://apifox.com/apidoc/shared-26c67aee-0233-4d23-aab7-08448fdf95ff/api-93850835
• 基地址：http://big-event-vue-api-t.itheima.net