【vue3-ts】-小兔鮮兒專案2022新版-系列開篇

MegaSu發表於2022-02-20
Vue

【vue3-ts】-小兔鮮兒專案-2022新版

專案使用 Vite + Vue3 + TypeScript + Pinia + VueRouter@4 進行開發。

程式碼檢查和格式化為：ESlint + Prettier

專案預覽地址

專案預覽地址：http://erabbit.itheima.net/

推薦 IDE 設定

VSCode 編輯器 + 外掛-Volar (注意禁用 Vetur 外掛) + 外掛-TypeScript Vue Plugin (Volar).

?注意：

  • Vue3 + TS 開發共安裝 2 個 Volar 外掛(擴充)，其中一個為 TS 支援外掛(擴充)。
  • 需禁用 Vetur 外掛(擴充)。

在 TS 中支援 .vue 匯入

VsCode 內建的 TypeScript 外掛(擴充)不能處理 .vue 匯入的型別資訊，所以我們用 vue-tsc 替換 tsc CLI 來進行型別檢查。在編輯器中，我們需要通過 TypeScript Vue Plugin (Volar) 外掛來識別 .vue 檔案的 TypeScript 型別資訊。

如果你覺得獨立的 TypeScript 外掛(擴充)不夠快，Volar 還實現了一個接管模式，它的效能更好。

可以通過以下步驟啟用：

  1. 禁用內建的 TypeScript 外掛(擴充)
    1. 在 VSCode 的擴充皮膚輸入 @builtin typescript 搜尋內建的 Typescript 外掛(擴充)。
    2. 找到 TypeScript and JavaScript Language Features，右鍵選擇 “禁用”
  2. 重啟 VsCode 編輯器，在重啟後生效。

Vite 自定義配置

點選檢視 ⚓Vite 配置參考.

指令碼命令

package.json

"scripts": {
    "dev": "vite",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "typecheck": "vue-tsc --noEmit",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview --port 5050"
}

安裝依賴

  • 基於 packjson.json 檔案安裝專案所需依賴包。
yarn

編譯和熱過載開發

  • 通過 vite 啟動開發伺服器，編譯原始碼和熱過載。
yarn dev

執行 ESLint 格式化

  • ✨開發過程中，所有黃色警告類的格式問題，都可通過執行以下命令修復警告問題。
yarn lint

執行 TS 檢查

  • 呼叫 vue-tsc 檢查 TypeScript 型別問題。（程式碼重構時十分好用）
yarn typecheck

執行打包命令

  • 包含 TS 型別檢查，編譯 和 壓縮。
yarn build

預覽打包後的專案

  • 執行 yarn build 打包後的專案原始碼。
yarn preview

相關文章