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

• 2022 年 2 月 20 日
• 筆記
• ts, typescript, vue3, Vue3+TS, 🐰Vue3+TS小兔鮮兒2022新版

【vue3-ts】-小兔鮮兒項目-2022新版

項目使用 Vite + Vue3 + TypeScript + Pinia + VueRouter@4 進行開發。

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

項目預覽地址

項目預覽地址：//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