《WaLiAPI - 本地 LLM API 网关》第1-1节：初始化工程搭建

作者：小傅哥
博客：https://bugstack.cn (opens new window)

沉淀、分享、成长，让自己和他人都能有所收获！😄

大家好，我是技术UP主小傅哥。

从这一节开始，我们将一步步搭建 WaLiAPI 项目的基础框架。WaLiAPI 是一个本地 LLM API 网关桌面软件，将各供应商 API 统一转换为 OpenAI 兼容协议，让下游 AI IDE（WaLiCode、ChatBox、NextChat 等）只需一套配置就能调用任意 AI 供应商。

一、本章诉求

我们需要完成 WaLiAPI 项目的基础框架搭建：

1. 初始化 Tauri + React + TypeScript 前端工程
2. 配置 Rust 后端依赖（Axum、SQLx、Reqwest、Serde 等）
3. 创建前端项目结构（pages、components、types、lib 等）
4. 创建后端项目结构（server、core、adaptor、db、security 等）
5. 让项目可以正常运行起来（npm run tauri dev）

二、环境说明

1.1 软件安装

• Rust：使用 rustup 安装 Rust 工具链
• Node.js：建议 20+（使用了一些新的特性）
• VS Code：配合 Tauri、rust-analyzer 插件开发体验最佳
• Git：用于拉取工程代码、管理分支

此外推荐 AI IDE 工具（任何你使用熟练的也都可以），walicode.xiaofuge.cn (opens new window)。前端页面的代码，基本都是 AI IDE 这样的工具来完成开发即可。

1.2 整体架构设计

WaLiAPI 是一个纯 Tauri 桌面应用，采用前后端一体化架构：

• 前端（src/）：React 19 + TypeScript + Vite 7 + Tailwind CSS 4，负责 UI 展示和用户交互
• 后端（src-tauri/）：Rust + Tauri 2 + Axum + SQLite + Reqwest，负责 API 网关核心逻辑
• 通信方式：Tauri Command Bridge（invoke_handler），前端通过 invoke() 调用后端命令

为什么选 Tauri 而不是 Electron？Tauri 使用系统 WebView 渲染界面，包体积小（通常只有几 MB）、内存占用低、启动速度快。同时又具备打包成多端的能力，包括 Windows、Mac、Linux，也可以打包成安卓、iOS 应用。

1.3 为什么选择这样的技术栈？

前端技术栈：

• React 19：最流行的前端框架之一，组件化开发，配合 Vite 构建速度飞快
• Tailwind CSS 4：原子化 CSS 框架，写样式像拼积木一样简单
• TypeScript：类型安全，让代码更健壮、更好维护
• React Router 7：声明式路由，页面导航清晰
• Zustand：轻量级状态管理，比 Redux 简单很多

后端技术栈：

• Tauri 2：比 Electron 更轻量的桌面应用框架，使用 Rust 作为后端
• Axum：Tokio 生态的 HTTP 框架，性能极高、类型安全，与 Tokio 异步运行时深度集成
• SQLx：Rust 的异步 SQL 库，编译时检查 SQL 语句，类型安全
• Reqwest：Rust 的 HTTP 客户端，支持流式请求和响应
• Serde：Rust 的序列化/反序列化框架，处理 JSON 数据