# create-tauri-app **Repository Path**: startvibe/create-tauri-app ## Basic Information - **Project Name**: create-tauri-app - **Description**: No description available - **Primary Language**: Shell - **License**: Apache-2.0 - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-11-22 - **Last Updated**: 2025-12-04 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # @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） ## 🚀 快速开始 ### 全局安装 ```bash # 全局安装模板创建工具 npm install -g @startvibe/create-tauri-app # 或使用 npx npx @startvibe/create-tauri-app ``` ### 直接使用（推荐） ```bash # 克隆仓库 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` 命令 - **路径感知**: 开发时始终明确当前工作目录 ### 开发工作流示例 ```bash # 主项目开发（根目录） pnpm install pnpm lint # 模板项目开发（进入template目录） cd template/ pnpm install pnpm tauri dev # 返回主项目 cd ../ ``` ## 📖 使用方法 ### 1. 创建新项目 ```bash # 在根目录下使用 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 ..` ### 主要命令 **主项目命令（根目录下）**： ```bash # 创建新项目 pnpm create # 检查代码质量 pnpm lint # 修复代码问题 pnpm lint:fix # 格式化代码 pnpm format # 提交代码（遵循规范） pnpm commit ``` **模板子项目命令（template 目录下）**： ```bash # 进入模板目录（必须） 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. 修改模板 ```bash # 进入模板目录（必须） cd template # 安装依赖 pnpm install # 开发模式 pnpm tauri dev # 修改代码和配置（Next.js + React + Tauri） # ... # 测试构建 pnpm tauri build # 返回根目录 cd ../ ``` ### 2. 测试创建 ```bash # 返回根目录 cd .. # 创建测试项目 node create.js my-test-app # 或者使用新的命令 create-tauri-app my-test-app # 验证创建的项目 cd my-test-app pnpm install pnpm tauri dev ``` ### 3. 提交更改 ```bash # 返回根目录 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 文档](https://tauri.app/) - [React 文档](https://react.dev/) - [TypeScript 文档](https://www.typescriptlang.org/) - [Tailwind CSS 文档](https://tailwindcss.com/) - [pnpm 文档](https://pnpm.io/) ## 🔄 版本历史 ### 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 组件集成