@startvibe/create-tauri-app - Tauri 2 + Next.js + React + TypeScript App Creator

一个用于创建 Tauri 2 桌面应用程序的命令行工具，提供开箱即用的 Next.js + React 开发模板。

🎯 项目概述

这是一个双架构项目，包含：

1. 主项目: 基于 npx 的 Tauri 2 应用创建工具
2. 模板子项目: 完整的 Tauri 2 + Next.js 桌面应用模板

主项目提供交互式项目创建功能，模板子项目提供生产就绪的桌面应用框架，包含最佳实践的配置和工具链。

主要特性

• 🚀 Tauri 2 - 轻量级、安全的桌面应用框架
• ⚛️ React 19 - 最新的 React 框架
• 🚀 Next.js 16.0.3 - 全栈 React 框架，使用 App Router
• 📝 TypeScript 5.8.3 - 类型安全的 JavaScript
• 🎨 Tailwind CSS v3 - 实用优先的 CSS 框架
• 🌙 深色模式 - 基于 DaisyUI 5.x 的主题切换功能
• 🧩 DaisyUI 5.x - 美观的 UI 组件库
• 🔧 Next.js 静态导出 - 适配 Tauri 桌面应用的构建模式
• 📦 pnpm - 高效的包管理器
• ✅ ESLint + Prettier - 代码质量和格式化
• 📝 Conventional Commits - 规范的提交信息（支持 emoji 和中文）
• 🔒 Git Hooks - 自动化的代码检查
• 🤖 Claude Code MCP - 集成 AI 辅助开发工具（Context7 + Playwright）

🚀 快速开始

全局安装

# 全局安装模板创建工具
npm install -g @startvibe/create-tauri-app

# 或使用 npx
npx @startvibe/create-tauri-app

直接使用（推荐）

# 克隆仓库
git clone https://github.com/startvibe/create-tauri-app.git
cd create-tauri-app

# 安装依赖
pnpm install

# 创建新项目
pnpm create my-app

# 进入项目目录
cd my-app

# 开始开发
pnpm tauri dev

🔧 开发环境路径管理

重要: 本项目采用双架构设计，需要严格管理开发路径：

路径管理原则

• 主项目开发: 在项目根目录进行 CLI 工具开发
• 模板子项目开发: 必须先进入 template/ 目录进行前端开发
• 命令执行: 在正确的目录下执行对应的 pnpm 命令
• 路径感知: 开发时始终明确当前工作目录

开发工作流示例

# 主项目开发（根目录）
pnpm install
pnpm lint

# 模板项目开发（进入template目录）
cd template/
pnpm install
pnpm tauri dev

# 返回主项目
cd ../

📖 使用方法

1. 创建新项目

# 在根目录下使用 pnpm create（推荐）
pnpm create my-app

# 或使用全局安装的命令
create-tauri-app my-app

2. 交互式配置

创建项目时会提示您输入以下信息：

• 项目名称 - 默认使用目录名
• 项目描述 - 项目的基本描述
• 作者 - 作者名称
• 许可证 - 默认 Apache-2.0
• 包管理器 - 默认 pnpm
• 初始化 Git - 默认 true

3. 项目结构

创建的项目将包含以下结构：

my-app/
├── src/                    # Next.js App Router 源码
│   ├── app/               # App Router 目录
│   │   ├── layout.tsx     # 根布局
│   │   ├── page.tsx       # 首页
│   │   └── ...            # 其他页面
│   ├── components/        # React 组件
│   │   └── ui/           # UI 基础组件
│   ├── lib/              # 工具函数
│   └── styles/           # 全局样式
├── src-tauri/             # Tauri 后端源码
│   ├── src/              # Rust 源码
│   ├── capabilities/     # Tauri 权限配置
│   └── tauri.conf.json  # Tauri 配置
├── public/               # 静态文件
├── next.config.js        # Next.js 配置
├── tailwind.config.js    # Tailwind CSS 配置
├── .mcp.json             # Claude Code MCP 配置
├── .husky/               # Git hooks（自动安装）
├── .vscode/              # VS Code 配置
├── package.json          # 项目配置
├── README.md             # 项目文档
└── ...                   # 其他配置文件

🔧 开发指南

开发模板项目

如果您需要修改模板：

1. 导航到模板目录：cd template/（必须先进入模板目录）
2. 模板文件位置：template/ 目录下的 Next.js + Tauri 代码
3. 测试模板：在 template/ 目录中运行 pnpm tauri dev
4. 更新配置：修改模板中的配置文件后，返回根目录确保通过 pnpm lint 检查
5. 路径管理：开发完成后返回根目录 cd ..

主要命令

主项目命令（根目录下）：

# 创建新项目
pnpm create <project-name>

# 检查代码质量
pnpm lint

# 修复代码问题
pnpm lint:fix

# 格式化代码
pnpm format

# 提交代码（遵循规范）
pnpm commit

模板子项目命令（template 目录下）：

# 进入模板目录（必须）
cd template/

# 安装依赖
pnpm install

# 启动开发服务器
pnpm tauri dev

# 构建生产版本
pnpm tauri build

# TypeScript 类型检查
pnpm typecheck

# 返回根目录
cd ../

📁 项目结构

双项目架构：

@startvibe/create-tauri-app/           # 主项目根目录
├── create.js                          # CLI 工具入口文件
├── package.json                       # 主项目依赖配置
├── eslint.config.js                   # 双项目 ESLint 配置
├── cz-config.js                       # 约定式提交配置
├── commitlint.config.js               # 提交信息验证
├── .husky/                            # Git hooks
├── .specify/                          # Speckit 配置和模板
├── CLAUDE.md                          # Claude Code 开发指导
├── README.md                          # 项目文档
└── template/                          # 模板子项目
    ├── src/                           # Next.js 应用源码
    │   └── app/                       # App Router 目录
    ├── src-tauri/                     # Tauri 后端源码
    │   ├── src/                       # Rust 源码
    │   ├── capabilities/              # Tauri 权限配置
    │   └── tauri.conf.json           # Tauri 配置
    ├── public/                        # 静态文件
    ├── next.config.js                 # Next.js 配置
    ├── tailwind.config.js             # Tailwind CSS 配置
    ├── .mcp.json                      # Claude Code MCP 配置
    └── package.json                   # 模板项目依赖

🛠️ 技术栈

模板项目

• 前端: React 19, Next.js 16.0.3, TypeScript 5.8.3
• 路由: Next.js App Router（强制）
• 样式: Tailwind CSS v3, DaisyUI 5
• 后端: Tauri 2.0, Rust 1.89
• 构建: Next.js 静态导出（output: 'export'）
• 工具: pnpm, ESLint, Prettier, Husky
• AI 辅助: Claude Code + MCP (Context7 + Playwright)

创建工具

• 运行时: Node.js 22+
• 依赖: Commander, Inquirer, Chalk, Ora
• 包管理: pnpm（推荐）

📝 开发流程

1. 修改模板

# 进入模板目录（必须）
cd template

# 安装依赖
pnpm install

# 开发模式
pnpm tauri dev

# 修改代码和配置（Next.js + React + Tauri）
# ...

# 测试构建
pnpm tauri build

# 返回根目录
cd ../

2. 测试创建

# 返回根目录
cd ..

# 创建测试项目
node create.js my-test-app
# 或者使用新的命令
create-tauri-app my-test-app

# 验证创建的项目
cd my-test-app
pnpm install
pnpm tauri dev

3. 提交更改

# 返回根目录
cd ..

# 使用规范提交
pnpm commit

# 或手动提交
git commit -m "✨feat: update template dependencies"

🔒 代码质量

项目使用以下工具确保代码质量：

• ESLint - 代码检查，支持 React 和 TypeScript
• Prettier - 代码格式化
• Commitlint - 提交信息验证
• lint-staged - 仅检查暂存的文件

📄 许可证

本项目采用 Apache 2.0 许可证。

🤝 贡献

欢迎提交 Issue 和 Pull Request！

贡献指南

1. Fork 项目
2. 创建功能分支
3. 提交更改（使用 Conventional Commits）
4. 推送到分支
5. 创建 Pull Request

📚 相关文档

• Tauri 文档
• React 文档
• TypeScript 文档
• Tailwind CSS 文档
• pnpm 文档

🔄 版本历史

v3.1.0 (最新)

• 新增开发环境路径管理原则
• 完善双项目架构文档
• 集成 Claude Code MCP 工具链
• 更新为 Next.js 16.0.3 + App Router
• 增强 TypeScript 5.8.3 支持

v3.0.0

• 重新定义为双项目架构
• 主项目: npx CLI 工具
• 模板项目: Tauri 2 + Next.js 桌面应用模板
• 新增 MCP 驱动开发流程
• 统一代码质量标准

v1.0.0

• 初始版本发布
• 支持 Tauri 2 + React 19 + TypeScript
• 完整的开发工具链
• 代码质量和 Git 提交规范
• 支持深色模式
• daisyUI 组件集成