模板介绍
IndieShow 是一个专为独立开发者设计的产品展示网站模板,基于 Nuxt 3、TailwindCSS 和 TypeScript 构建,提供响应式设计、SEO 优化和多语言支持
什么是 IndieShow?
IndieShow 是一个专为独立开发者设计的产品展示网站模板。基于 Nuxt 3 + TailwindCSS + TypeScript 构建,您可以通过简单的配置在几分钟内创建一个专业的产品展示网站!
独立开发者选择 IndieShow 的原因:
- 🚀 快速现代 - 基于 Nuxt 3 和 TypeScript 构建
- 🎨 精美界面 - 由 Tailwind CSS 提供支持的响应式设计
- 📱 多端适配 - 在所有设备上表现出色
- 🔍 SEO 优化 - 内置搜索引擎优化功能
- 🌐 国际化支持 - 开箱即用的多语言支持
- 🛠️ 简单配置 - 通过配置文件轻松自定义
无论您是初学者还是经验丰富的开发人员,阅读本文档都可以指导您完成网站的设置、配置和部署。
性能指标
实际项目性能测试数据(基于 Google PageSpeed Insights):
| 测试项目 | 移动端 | 桌面端 | 业界标准 |
|---|---|---|---|
| 首屏加载 | 1.2s | 0.8s | < 2.5s |
| 首次内容绘制 | 1.0s | 0.6s | < 1.8s |
| 最大内容绘制 | 1.8s | 1.2s | < 2.5s |
| 累积布局偏移 | 0.02 | 0.01 | < 0.1 |
| 总体性能得分 | 94 | 99 | > 90 |
适用场景
1. 产品官网
- 软件产品展示
- App 下载页面
2. 个人作品集
- 独立开发者作品展示
- 自由职业者项目展示
技术栈
Nuxt 3
基于 Vue 3 的全栈框架,提供服务器端渲染和静态站点生成,支持自动路由和API功能
TypeScript
JavaScript的超集,为JS添加静态类型定义,提高代码可维护性和开发效率
Tailwind CSS
实用优先的CSS框架,无需编写自定义CSS即可快速构建现代网站
i18n
Nuxt的国际化解决方案,支持多语言内容、路由和SEO优化
markdown-it
快速且易于扩展的Markdown解析器,用于将Markdown文档转换为HTML
nuxtjs/sitemap
自动生成和管理网站地图,优化搜索引擎收录,提升SEO效果
兼容性
系统要求:
- Node.js ≥ 18.0
- pnpm ≥ 8.0
- 现代浏览器(支持 ES2015+)
核心功能
开发体验
- 使用最新依赖版本,持续更新
- 整洁优雅的代码,采用 Composition API 和
<script setup> - 完整的 TypeScript 类型支持
- 集成 antfu/eslint-config 以保持一致的代码风格
UI 设计
- 基于 TailwindCSS 的响应式设计
- 亮色/暗色主题,自动跟随系统主题
- 美观的过渡和页面效果
- 可自定义主题颜色
国际化
- 支持英文和中文,易于扩展
- 自动检测浏览器语言
- 简单配置,即时更新翻译
- URL 中自动添加语言前缀
多平台适配
- 适配移动端和桌面端
- 支持 PWA,可安装到主屏幕
- 为不同设备优化交互
SEO 优化
- 基于 Nuxt 3 的 SSR 支持
- 自动生成 sitemap.xml
- 静态页面预渲染
- 完整的 Meta 标签支持
- 可自定义页面标题和描述
性能优化
- 自动代码分割
- 智能组件预加载
- 自动图片优化
- 按需图标加载