前言
Tauri 跨端笔记实战项目是基于 Notegen 开源项目，本系列深度解析如何运用Tauri框架开发跨平台AI笔记应用。涵盖核心技术选型、架构设计、典型场景开发及常见问题解决方案，通过代码级演示带您掌握集成AI能力的全流程开发技巧。
NoteGen 应用截图：
看过上一期的同学应该已经了解了我们要开发一款什么样的 APP。
从本期开始，我们将真正进入开发阶段的第一步：搭建项目。
macOS
如果你打算开发 iOS，你需要安装 Xcode。
如果只针对桌面端开发，可以安装 Xcode 命令行工具即可：
shell 体验AI代码助手 代码解读复制代码xcode-select \--install
windows
下载 Microsoft C++ 构建工具 安装程序并打开它以开始安装。在安装过程中，选中“使用 C++ 进行桌面开发”选项：
Windows 10（从版本 1803 开始）和更高版本的 Windows 上已经安装了 webview2，如果你的版本更低，需要手动安装：
WebView2 Runtime 下载区
安装 rustup
macOS 或 linux 执行一下命令，随后重新启动终端：
shell 体验AI代码助手 代码解读复制代码curl \--proto '\=https' \--tlsv1.2 https://sh.rustup.rs \-sSf | sh
windows 前往 www.rust-lang.org/tools/insta… 下载并安装。
移动端开发
如果要做移动端开发，还需要做一些配置，有兴趣可以先了解一下：
Android
iOS
本文跳过这块，后续做移动端开发时再进行讲解。
对 Tauri2 不太了解也没有关系，有时间可以先浏览一遍官方文档，官网目前还有大量内容未汉化，如果你不擅长阅读文档，跟着我一步一步的搭建也是不错的选择，我会更侧重于前端方式来实现，尽量让大家避免使用 rust 实现功能，尽量使用前端的工具链。
Tauri 提供了很多种创建项目的方式，我们选择前端目前最流行的方式 pnpm：
shell 体验AI代码助手 代码解读复制代码pnpm create tauri-app
随后需要填写几个问题：
shell 体验AI代码助手 代码解读复制代码✔ Project name · note-gen
✔ Identifier · com.codexu.NoteGen
✔ Choose which language to use for your frontend · TypeScript
✔ Choose your package manager · pnpm
✔ Choose your UI template › 这里先选 react
创建后进入目录：
shell 体验AI代码助手 代码解读复制代码cd note-gen
pnpm install
pnpm tauri dev
注意这里是 tauri dev，如果是 pnpm run dev 只是跑前端 web 服务。
创建 next.js，合并项目
由于我们目标是使用 next.js 开发，所以要删除 vite 和 react。
可以先删除 src 和 vite.config.ts，如果你不想使用 next.js，直接用你喜欢的框架也是没问题的，核心的思路是没什么区别的。
使用 npx create-next-app@latest 创建一个新项目，随后把里面的文件复制到 tauri 项目中，注意 package.json 的内容合并。
shell 体验AI代码助手 代码解读复制代码# 其他随意
Would you like to use Tailwind CSS? - yes
更新 Tauri 配置：
json 体验AI代码助手 代码解读复制代码{
"build": {
"beforeDevCommand": "pnpm dev",
"beforeBuildCommand": "pnpm build",
"devUrl": "http://localhost:3456",
"frontendDist": "../dist"
}
}
更新 next.config.ts 配置：
ts 体验AI代码助手 代码解读复制代码import type { NextConfig } from "next";
const isProd = process.env.NODE_ENV === 'production';
const internalHost = process.env.TAURI_DEV_HOST || 'localhost';
const nextConfig: NextConfig = {
/* config options here */
output: "export",
images: {
unoptimized: true,
},
assetPrefix: isProd ? undefined : `http://${internalHost}:3456`,
devIndicators: {
appIsrStatus: false,
},
sassOptions: {
silenceDeprecations: ['legacy-js-api'],
},
};
export default nextConfig;
更新 package.json
json 体验AI代码助手 代码解读复制代码"scripts": {
"dev": "next dev -p 3456",
"build": "next build",
"start": "next start -p 3456",
"lint": "next lint",
"tauri": "tauri"
},
现在运行 pnpm tauri dev，既可以启动一个桌面端程序，内容是 next.js 初始页面。
shadcn/ui
shadcn/ui 在开发中体验真的是无比舒服，这个只有在体验之后才可以感受到。
运行初始化命令以
shell 体验AI代码助手 代码解读复制代码pnpm dlx shadcn@latest init
问题是一些风格的选择，这里直接默认即可。
shadcn/ui 与其他常规的组件库安装组件的方式不同，每个组件都是独立安装的，所以就可以独立的去维护。
shell 体验AI代码助手 代码解读复制代码pnpm dlx shadcn@latest add button
这样就可以安装你的第一个按钮组件了，未来使用的组件多了之后，你的 src/components/ui 目录将会是这样：
他的好处显而易见，你可以在项目里直接修改这些组件。
当你查看 shadcn/ui 文档时，可能会疑问，为什么连 API 接口都不写呢？这是因为它实际上是使用 tailwind 对 radix-ui 做了外观的美化，大部分的组件，你可以查看 radix-ui 文档即可。
本文至此结束，今天带大家创建了一个基础的 tauri + next.js 的项目，目前它还是空空如也，没关系，我将在未来的文章中，带大家一步一步的完成这个笔记应用，如果你已经迫不接待的进行下一步，可以查看我的note-gen仓库，参考其中的源码，同时祝你在其他同学中的学习进度遥遥领先。
Github 仓库：github.com/codexu/note…
官网：notegen.top/
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。