ViteReact启动器

vite-reactts18-chakra-jest-husky — Vite 启动器模板

作者 The24thDS

基于 Vite 的 React 18 + TypeScript 启动模板,集成 Chakra UI、Jest、ESLint、Prettier 与 Husky 提交钩子。

看看你的网站会是什么样

浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局,交互效果请以实际项目为准。

采集于 2026-10-02查看来源

值得关注的模板亮点

从已有项目资料中,快速了解它的特点。

01

Vite 构建,React 18 与 TypeScript 组合

02

Chakra UI 组件库,附带 Framer Motion

03

Jest 与 Testing Library 测试配置

04

ESLint、Prettier 代码检查与格式化

05

Husky 提交前钩子与 commitlint 提交规范

06

MIT 许可,可免费使用与修改

模板详细介绍

这是一个用于搭建 React 18 应用的启动模板,构建工具为 Vite,语言为 TypeScript,UI 层使用 Chakra UI 并搭配 Framer Motion。仓库同时配置了 Jest 与 Testing Library 用于测试,ESLint 与 Prettier 负责代码检查与格式化,Husky 提供提交前钩子,commitlint 约束提交信息格式。

模板通过 degit 从仓库拉取代码,初始化 git 后使用 yarn 安装依赖,yarn dev 启动本地开发服务。README 列出了 lint、build、test 等脚本命令,并建议配合 ESLint、Prettier 与 styled-components 的 VS Code 扩展使用。

模板本身不包含业务页面或后端逻辑,属于工程脚手架性质;演示站点仅用于展示默认页面。代码以 MIT 许可发布,可免费使用、修改与分发,但需保留版权与许可声明。

ViteReact启动器

适合你的项目吗?

适用场景

  • 快速搭建 React + TypeScript 新项目
  • 需要 Chakra UI 作为组件库的前端工程
  • 希望开箱带有 Jest 测试与代码检查配置的项目
  • 团队要求统一提交信息格式与提交前自动格式化的场景

适合人群

  • 使用 React 与 TypeScript 的前端开发者
  • 偏好 Vite 而非其他构建工具的项目
  • 需要 Chakra UI 组件体系与测试配置的团队
  • 接受 yarn 作为包管理器的项目

上手与定制指南

结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。

  1. 1

    使用 npx degit The24thDS/vite-reactts18-chakra-jest-husky my-app 拉取模板

  2. 2

    进入目录后执行 git init 初始化仓库

  3. 3

    使用 yarn 安装依赖,yarn dev 启动开发服务

  4. 4

    提交信息需符合 conventional-changelog 规范,可用 yarn cz 辅助生成

  5. 5

    演示图片、字体、图标等第三方素材需单独核对许可

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供;担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 77 / 100
技术栈
Vite · React
网站类型
启动器
这个分数如何计算

本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2023-01-25
截图检查日期
2026-10-02

已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Vite。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 60744e96c8030a9081a33a02a55e986b02450db461145be3ea232e7649fbd0e9

2026-10-02T22:04:42.595Z

来源文件 / 仓库
# ReactTS 18 with Chakra UI and Vite

This is a [React](https://reactjs.org) + [TypeScript](https://www.typescriptlang.org/) + [Chakra UI](https://chakra-ui.com) boilerplate to be built with [Vite](https://vitejs.dev). It also includes [Husky](https://typicode.github.io/husk) and a pre-commit hook that runs `yarn format`.

## What's inside?

- [ReactJS](https://reactjs.org)
- [Vite](https://vitejs.dev)
- [TypeScript](https://www.typescriptlang.org)
- [Chakra UI](https://chakra-ui.com)
- [Framer Motion](https://www.framer.com/motion/)
- [Jest](https://jestjs.io)
- [Testing Library](https://testing-library.com)
- [Eslint](https://eslint.org)
- [Prettier](https://prettier.io)
- [Husky](https://typicode.github.io/husky)

\+ other smaller dependencies

## Getting started

1. Create the project.

   ```bash
   npx degit The24thDS/vite-reactts18-chakra-jest-husky my-app
   ```

2. Access the project directory.

   ```bash
   cd my-app
   ```

3. Initialize a git repository.

   ```bash
   git init
   ```

4. Install dependencies.

   ```bash
   yarn
   ```

5. Serve with hot reload at http://localhost:5173.
   ```bash
   yarn dev
   ```

## Recommended VS Code extensions

- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components)

## Other commands

### Lint commands

- Run eslint
  ```bash
  yarn lint
  ```
- Run eslint with fixing
  ```bash
  yarn lint:fix
  ```

### Build commands

```bash
yarn build
```

### Test commands

- Run tests with coverage (will open the coverage if all tests succeed)
  ```bash
  yarn test
  ```
- Watch tests
  ```bash
  yarn test:watch
  ```

### Commit commands
This project use [commitlint](https://github.com/conventional-changelog/commitlint) to ensure that commit messages are [conventional-changelog](https://github.com/conventional-changelog/commitlint/tree/master/@commitlint/config-conventional) compliants.

To help you build more efficient commit messages, you can use the [commitizen](https://github.com/commitizen/cz-cli) package by running this command :
```bash
yarn cz
```

## License

This project is licensed under the MIT License.
反馈内容错误

看看同类模板

对比同技术栈与用途的模板,找到更适合的视觉与内容结构。