ViteReactHTML工具站

tropical — Vite 工具站模板

作者 bensmithett

Tropical 是一个基于 Vite 的静态站点模板，以 HTML 为主、在需要交互的位置嵌入客户端 JS 小岛，并提供页面与组件脚手架命令。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

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

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

全部页面与视图 2

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

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

值得关注的模板亮点

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

01

以 HTML 为主、按需嵌入客户端 JS 的静态站点结构

02

提供 dev、build、stories、page、component 等 npm 脚本

03

构建产物输出到 dist/static 目录

04

集成 Ladle 用于组件预览

05

支持通过命令行脚手架生成页面与组件文件

06

采用 MIT 许可的 GitHub 模板仓库

模板详细介绍

Tropical 是一个 GitHub 模板仓库，用于搭建以 HTML 为主体的静态站点，只在需要交互的位置加入客户端 JavaScript，形成所谓“JS 小岛”。它使用 Vite 作为构建工具，并支持 React 组件。

仓库提供了开箱可用的脚本：`dev` 启动本地开发服务器，`build` 将静态站点输出到 `dist/static`，`stories` 启动 Ladle 组件预览，`page` 与 `component` 分别生成新页面和新组件的脚手架文件。项目文档位于 tropical.js.org，仓库 README 也建议直接浏览 `src` 目录了解结构。

模板采用 MIT 许可，可免费使用、修改、商用和分发，但演示图片、字体、图标等第三方素材需按各自许可单独核对；托管、域名等外部服务可能另外收费。

ViteReactHTML工具站

适合你的项目吗？

适用场景

  • 搭建以静态 HTML 为主、仅局部需要交互的站点
  • 希望用 Vite 管理静态站点构建流程的项目
  • 需要在页面中按需引入 React 组件的场景
  • 想通过脚手架命令快速新增页面或组件文件
  • 需要组件预览环境来开发独立 UI 组件

适合人群

  • 偏好 HTML 优先、少量客户端 JS 的开发者
  • 使用 Vite 构建静态站点的团队
  • 需要页面与组件脚手架的项目
  • 接受 MIT 许可并自行核对第三方素材的使用者

上手与定制指南

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

  1. 1

    使用 npm、yarn 或 pnpm 安装依赖

  2. 2

    运行 dev 脚本在 localhost:3000 启动开发服务器

  3. 3

    运行 build 脚本将静态站点构建到 dist/static

  4. 4

    运行 stories 脚本启动 Ladle 组件预览

  5. 5

    可用 page 与 component 脚本生成新页面或组件文件

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

  • 使用前需自行安装依赖，可选择 npm、yarn 或 pnpm 之一。
  • 本地开发需运行 dev 脚本，默认在 localhost:3000 启动开发服务器。
  • 构建产物固定输出到 dist/static 目录，部署时需以此目录为静态站点根。
  • 组件预览依赖 Ladle 工具，需运行 stories 脚本启动。
  • README 提供 Netlify 一键部署入口，使用该托管服务可能涉及第三方账号与费用。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Using your choice of `npm`, `yarn` or `pnpm`, install dependencies then

README 原文

**`yarn dev`** starts a dev server at [localhost:3000](http://localhost:3000/)

README 原文

**`yarn build`** builds the static site into `dist/static`

README 原文

**`yarn stories`** starts [Ladle](https://ladle.dev/)

README 原文

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/bensmithett/tropical)

README 原文
https://github.com/bensmithett/tropical/blob/main/LICENSEhttps://github.com/bensmithett/tropical/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

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

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

这个项目需要核对什么

记录的仓库更新时间
2022-10-28
截图检查日期
2026-10-02

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

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

查看当时使用的来源资料

SHA-256: c73f72efb38d3847e0ec3c4f2e00e3013d778b5dc6f0904a2f16e50344e2976f

2026-10-02T11:40:08.819Z

来源文件 / 仓库
# [Tropical](https://tropical.js.org/) 🏝

This is a [template repo](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-on-github/creating-a-repository-from-a-template). Click the green "Use this template" button 👆 to get started, or [read the docs](https://tropical.js.org/) to find out more about building static sites with Tropical.

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/bensmithett/tropical)

---

Welcome to your new [Tropical](https://tropical.js.org/) site!

Using your choice of `npm`, `yarn` or `pnpm`, install dependencies then (using `yarn` as an example)...

- **`yarn dev`** starts a dev server at [localhost:3000](http://localhost:3000/)
- **`yarn build`** builds the static site into `dist/static`
- **`yarn stories`** starts [Ladle](https://ladle.dev/)
- **`yarn page my-new-page`** scaffolds a file for a new page
- **`yarn component MyNewComponent`** scaffolds files for a new component

Check out [the docs](https://tropical.js.org) or dive in and explore the `src` directory.

---

🐞 [**Issues**](https://github.com/bensmithett/tropical/issues) for bugs, ✨ [**discussions**](https://github.com/bensmithett/tropical/discussions) for questions, feature requests, or just to show off what you've built — I'd love to see it!
反馈内容错误

看看同类模板

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

vituum

vituum

⚡⚙️ Fast Prototyping with Template Engines in Vite. Small and fast static site generator for Vite.

Vite · 工具站

readme-builder

readme-builder

Visual drag-and-drop README editor with live GitHub-flavored preview. SEO-optimized templates, 15+ block types…

Vite · 工具站

examify-json-editor

examify-json-editor

Examify JSON Editor (React): A user-friendly web tool for creating, editing, and validating Examify JSON quest…

Vite · 工具站

react-currency-converter

react-currency-converter

A currency converter in React + Vite that works the moment you clone it. Rates are the **official tables publi…

Vite · 工具站

stacks

stacks

House project templates and the zero-dependency generator that stamps them out. Subtractive: each template is …

Vite · 工具站

helical-qfh-calculator

helical-qfh-calculator

Axial-mode helical (Kraus) and quadrifilar helix (QFH) antenna calculator with 3D preview and printable build …

Vite · 工具站