與 Vite On 類固醇反應

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

透過 React with Vite On Steroids 輕鬆建立 React 應用程式

– 用於輕鬆建立高效能 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
  

  互動式使用者介面模式：

  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 許可證的許可。有關更多詳細信息，請參閱 LICENSE 文件。

致謝

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

按讚
反應
打字稿
Tailwind CSS
ESLint
更漂亮
訪問
測試庫
劇作家
哈士奇

查看模板@RicardoGEsteves

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

跟著我@ricardogesteves

X（推特）

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

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

github.com

以上是與 Vite On 類固醇反應的詳細內容。更多資訊請關注PHP中文網其他相關文章！