快速开始

环境要求

在开始之前，请确保你的开发环境满足以下要求：

Node.js 18.0 或更高版本
pnpm（推荐）、npm 或 yarn
Rust 和 Cargo（安装指南）
Tauri 依赖（各平台安装指南）

创建项目

使用脚手架工具创建新项目：

npx @linch-tech/create-desktop-app my-app

CLI 会询问以下信息：

选项	说明	示例
Project name	项目目录名和 package.json 中的 name	`my-app`
Display name	显示在标题栏的应用名称	`My App`
App identifier	应用唯一标识符	`com.mycompany.myapp`

命令行参数

你也可以通过命令行参数跳过交互式询问：

npx @linch-tech/create-desktop-app my-app \
  -d "My App" \
  -i com.mycompany.myapp \
  -y

参数说明：

参数	说明
`-d, --display-name`	显示名称
`-i, --identifier`	应用标识符
`-t, --template`	模板名称（默认 `default`）
`-y, --yes`	跳过所有询问，使用默认值

安装依赖

cd my-app
pnpm install

首次安装时，Rust 依赖编译可能需要几分钟时间。

启动开发服务器

pnpm tauri:dev

这会：

启动 Vite 开发服务器（前端热更新）
编译 Rust 代码
打开桌面应用窗口

首次启动时 Rust 编译较慢，后续启动会快很多。

项目结构预览

创建的项目结构如下：

my-app/
├── src/                    # 前端源码
│   ├── main.tsx           # React 入口
│   ├── App.tsx            # 路由和 Provider 配置
│   ├── config.ts          # 基座配置
│   └── pages/             # 页面组件
├── src-tauri/             # Tauri/Rust 源码
│   ├── src/
│   │   ├── lib.rs         # Rust 入口
│   │   └── main.rs
│   ├── Cargo.toml         # Rust 依赖
│   └── tauri.conf.json    # Tauri 配置
├── package.json
└── vite.config.ts

配置应用

打开 src/config.ts，这是应用的核心配置文件：

import { Home, Settings } from 'lucide-react';
import type { LinchDesktopConfig } from '@linch-tech/desktop-core';

export const config: Partial<LinchDesktopConfig> = {
  brand: {
    name: 'app.name',
    version: `v${__APP_VERSION__}`,
  },

  nav: [
    { title: 'app.home', path: '/', icon: Home },
    { title: 'settings.title', path: '/settings', icon: Settings },
  ],

  features: {
    updater: true,
    database: true,
    sentry: false,
  },

  i18n: {
    defaultLanguage: 'zh',
    supportedLanguages: ['zh', 'en'],
    resources: {
      en: {
        app: {
          name: 'My App',
          home: 'Home',
        },
      },
      zh: {
        app: {
          name: '我的应用',
          home: '首页',
        },
      },
    },
  },
};

添加新页面

创建页面组件 src/pages/About.tsx：

import { PageHeader } from '@linch-tech/desktop-core';

export function About() {
  return (
    <div className="p-6">
      <PageHeader title="关于" />
      <p>这是关于页面。</p>
    </div>
  );
}

在 src/App.tsx 添加路由：

import { About } from './pages/About';

// 在 Routes 中添加
<Route path="/about" element={<About />} />

在 src/config.ts 添加导航项：

import { Info } from 'lucide-react';

nav: [
  // ...其他导航项
  { title: 'app.about', path: '/about', icon: Info },
],

构建应用

pnpm tauri:build

构建产物位于 src-tauri/target/release/bundle/：

平台	产物
Windows	`.msi`, `.exe`
macOS	`.dmg`, `.app`
Linux	`.deb`, `.AppImage`