NUXTOR快速入门：10分钟内创建你的第一个桌面应用

NUXTOR快速入门：10分钟内创建你的第一个桌面应用

【免费下载链接】nuxtorBuild tiny desktop apps with Tauri, Nuxt 4 and NuxtUI 4项目地址: https://gitcode.com/gh_mirrors/nu/nuxtor

NUXTOR是一个基于Tauri、Nuxt 4和NuxtUI 4构建轻量级桌面应用的开发框架，让前端开发者能够用熟悉的Web技术快速打造跨平台桌面应用。本文将带你在10分钟内完成从环境搭建到应用打包的全过程，即使是新手也能轻松上手。

🚀 为什么选择NUXTOR开发桌面应用？

NUXTOR结合了现代Web开发与原生桌面应用的优势：

• 超小体积：基于Tauri的架构使应用体积比Electron小90%以上
• 原生性能：直接调用系统API，实现接近原生应用的性能体验
• Web技术栈：使用Vue.js/Nuxt生态开发界面，无需学习新语言
• 跨平台支持：一次开发，可打包为Windows、macOS和Linux应用

NUXTOR应用主界面展示，采用深色主题设计，集成了系统、存储和界面三大核心功能模块

⚙️ 一键安装步骤

1. 准备开发环境

确保系统已安装：

• Node.js 18+
• Rust 1.63+
• 系统依赖（Windows需Visual Studio构建工具，macOS需Xcode命令行工具）

2. 获取项目代码

git clone https://gitcode.com/gh_mirrors/nu/nuxtor cd nuxtor

3. 安装依赖并启动开发服务器

# 使用npm npm install npm run tauri dev # 或使用yarn yarn install yarn tauri dev

首次启动会自动安装Tauri依赖，稍等片刻后将看到应用窗口。开发模式下支持热重载，修改代码后界面会实时更新。

🔍 探索核心功能模块

NUXTOR提供了多个开箱即用的功能模块，位于app/pages/目录下：

命令行交互功能

通过commands.vue页面可以直接与系统shell交互，执行命令并查看输出结果。这对于需要系统级操作的应用非常实用。

NUXTOR命令行交互界面，支持输入系统命令并显示JSON格式的输出结果

文件系统操作

file.vue页面展示了如何安全地访问用户文件系统，通过Tauri的权限控制确保应用只访问允许的目录。

NUXTOR文件系统操作界面，可创建和编辑Documents目录下的文本文件

其他功能模块还包括：

• 系统信息（os.vue）：获取硬件和操作系统信息
• 通知系统（notifications.vue）：发送桌面通知
• 本地存储（store.vue）：使用localStorage和IndexedDB
• 网页视图（webview.vue）：嵌入网页内容

📦 最快打包方法

开发完成后，执行以下命令打包应用：

# 构建生产版本 npm run build # 打包应用 npm run tauri build

打包完成的应用会生成在src-tauri/target/release/bundle/目录下，根据不同平台生成对应的安装包格式（.exe、.dmg或.deb等）。

💡 新手常见问题解决

Q: 启动开发服务器时报错？

A: 检查Rust和Node.js版本是否符合要求，或尝试删除node_modules和src-tauri/target目录后重新安装依赖。

Q: 应用窗口白屏？

A: 确保Nuxt开发服务器已正常启动，可通过http://localhost:3000访问Web界面排查问题。

Q: 如何添加新页面？

A: 在app/pages/目录下创建新的.vue文件，Nuxt会自动生成路由，无需额外配置。

🎯 下一步学习路径

1. 查阅官方文档：README.md 和 README.zh-CN.md
2. 学习Tauri API：src-tauri/src/lib.rs
3. 探索Nuxt配置：nuxt.config.ts
4. 自定义应用外观：app/assets/css/main.css

NUXTOR让桌面应用开发变得简单而高效，无论是开发工具、文档查看器还是小型应用，都能快速实现。现在就开始你的桌面应用开发之旅吧！

【免费下载链接】nuxtorBuild tiny desktop apps with Tauri, Nuxt 4 and NuxtUI 4项目地址: https://gitcode.com/gh_mirrors/nu/nuxtor