Vike Starter
这是一个基于 Vike 和 React 的示例项目，用来展示服务端渲染（SSR）、HTML 流式传输（Streaming）以及动态路由能力。这个模板演示了 Vike 的文件路由、与 EdgeOne Pages 的适配等特性。
📚 示例特性一览
该项目包含若干示例页面，用来演示不同的 Vike 能力：
Pages
/- 首页，包含 Hero 区、导航胶囊按钮，以及服务端渲染的耗时信息/ssg- 静态站点生成（SSG）示例，页面在构建时预渲染，并展示构建时间/posts/@category/@slug- 动态路由示例，支持两级 URL 参数（如/posts/tech/hello-vike）/stream- HTML 流式传输示例，使用 React Suspense 和模拟的慢路径区块
主要特性
- ✨ Vike + React SSR - 基于文件路由的服务端渲染
- 🔄 HTML Streaming - 使用 React Suspense 的流式响应演示
- 🛣️ 动态路由 - 支持
@category/@slug模式的嵌套 URL 参数 - 🎨 现代化 UI - 使用 Tailwind CSS、渐变聚光灯背景和发光卡片
🧞 常用命令
以下所有命令都需要在项目根目录的终端中执行：
| Command | 说明 |
|---|---|
npm install | 安装依赖 |
npm run dev | 启动本地开发服务器，地址 localhost:3000 |
npm run build | 构建生产环境应用到 ./dist/ |
npm run start | 启动生产环境服务器（Node/Express） |
Vike 会在 pages/ 目录中查找 +Page.tsx 等路由相关文件。每个页面会根据文件名和 Vike 约定暴露为对应路由。
components/ 目录本身没有特殊约定，我们在这里放了可复用的 React 组件（例如 Hero 区）。
任何静态资源（如图片）可以放在 public/ 目录（如果你创建了该目录）。
🛠️ 技术栈
- Vike - 文件路由与 SSR 框架
- React - UI 库
- Tailwind CSS - 样式方案
- TypeScript - 类型化 JavaScript
- Vite - 开发服务器与打包工具
- EdgeOne Pages - 部署平台