现代 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