IndieShow 图标IndieShow 使用文档

模板介绍

IndieShow 是一个专为独立开发者设计的产品展示网站模板,基于 Nuxt 3、TailwindCSS 和 TypeScript 构建,提供响应式设计、SEO 优化和多语言支持

什么是 IndieShow?

IndieShow 是一个专为独立开发者设计的产品展示网站模板。基于 Nuxt 3 + TailwindCSS + TypeScript 构建,您可以通过简单的配置在几分钟内创建一个专业的产品展示网站!

独立开发者选择 IndieShow 的原因:

  • 🚀 快速现代 - 基于 Nuxt 3 和 TypeScript 构建
  • 🎨 精美界面 - 由 Tailwind CSS 提供支持的响应式设计
  • 📱 多端适配 - 在所有设备上表现出色
  • 🔍 SEO 优化 - 内置搜索引擎优化功能
  • 🌐 国际化支持 - 开箱即用的多语言支持
  • 🛠️ 简单配置 - 通过配置文件轻松自定义

无论您是初学者还是经验丰富的开发人员,阅读本文档都可以指导您完成网站的设置、配置和部署。

性能指标

实际项目性能测试数据(基于 Google PageSpeed Insights):

测试项目移动端桌面端业界标准
首屏加载1.2s0.8s< 2.5s
首次内容绘制1.0s0.6s< 1.8s
最大内容绘制1.8s1.2s< 2.5s
累积布局偏移0.020.01< 0.1
总体性能得分9499> 90

适用场景

1. 产品官网

  • 软件产品展示
  • App 下载页面

2. 个人作品集

  • 独立开发者作品展示
  • 自由职业者项目展示

技术栈

兼容性

系统要求:

  • 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 标签支持
  • 可自定义页面标题和描述

性能优化

  • 自动代码分割
  • 智能组件预加载
  • 自动图片优化
  • 按需图标加载

下一步

目录