現代 Web 開發的強大入門範本

使用 Vite On Steroids 輕鬆建立 React 應用程式React with Vite On Steroids – 用於輕鬆建立高效能 React 應用程式的入門範本。

裡面有什麼？

此範本包含旨在簡化您的開發流程的功能：

• Vite：閃電般快速的建置工具，確保快速開發和優化生產建置。
• React：用於建立使用者介面的流行 JavaScript 函式庫。
• TypeScript：為您的 JavaScript 添加型別安全性和增強工具。
• Tailwind CSS：實用程式優先的 CSS 框架，無需編寫自訂 CSS 即可創建令人驚嘆的設計。
• ESLint：保持程式碼庫乾淨並符合可插入的 linting 規則。
• Prettier：一個固執己見的程式碼格式化程序，可以在整個專案中強制執行一致的樣式。
• Vitest：採用 Vite 原生方法的超快單元測試架構。
• 測試庫：簡單而完整的測試實用程序，鼓勵良好的測試實踐。
• Playwright：支援多種瀏覽器的多功能端對端測試框架。
• Husky：自動化您的 Git 掛鉤，例如預先提交掛鉤，以確保程式碼在到達儲存庫之前的品質。

入門

先決條件

開始前，請確保您已安裝以下軟體：

• Node.js（版本 20.x 或更高版本）
• 紗線（或 npm 或 pnpm）

安裝

透過以下簡單步驟啟動您的專案：

1. 複製儲存庫：

   git clone https://github.com/RicardoGEsteves/react-with-vite-on-steroids.git
   cd react-with-vite-on-steroids

1. 安裝依賴項：

   yarn

運行開發伺服器

準備好開始編碼了嗎？使用以下命令啟動開發伺服器：

yarn dev

生產建築

當您準備好部署時，請使用以下命令建立生產版本：

yarn build

運行測試

此範本附帶內建測試實用程序，以確保您的程式碼按預期運作。

• 使用 Vitest 進行單元測試：

  yarn test

• 檢查測試覆蓋率：

  yarn coverage

• 與劇作家的端對端測試：

  • 運行所有測試：

  yarn playwright test
  

  • 交互UI模式：

  yarn playwright test --ui
  

  • 僅在桌面 Chrome 上執行測試：

  yarn playwright test --project=chromium
  

  • 在特定文件中執行測試：

  yarn playwright test example
  

  • 調試模式：

  yarn playwright test --debug
  

  • 使用 Codegen 自動產生測試：

  yarn playwright codegen
  

偵測和格式化

使用這些命令來維護程式碼品質和一致性：

• 檢查代碼：

  yarn lint

• 修正 linting 錯誤：

  yarn lint:fix

• 格式化代碼：

  yarn format

執照

該專案已獲得 MIT 許可證的許可。有關更多詳細信息，請參閱許可證文件。

致謝

非常感謝這些令人驚嘆的工具背後的開發人員和社群：

• 按讚
• 反應
• TypeScript
• Tailwind CSS
• ESLint
• 更漂亮
• 維斯特
• 測試庫
• 劇作家
• 沙啞

查看模板@RicardoGEsteves

我的網站上有許多內容 https://www.ricardogesteves.com

跟我來@ricardogesteves
X（推特）

RicardoGEsteves (里卡多·埃斯特維斯) · GitHub

全端開發人員 |熱衷於創造直覺且有影響力的使用者體驗 |總部位於葡萄牙里斯本？ - 里卡多·GE史蒂夫斯

github.com