从 Web 到 Desktop (一) : 项目开篇

从 Web 到 Desktop （一） : 项目开篇

你的世界你是主角，你也不普通 。

作者有话说

Hello，大家好呀！我是与墨学长。

之前有写过一个关于 Electron 的专栏，大家的反馈还算不错，很多小伙伴添加我的私人微信询问是否有项目可供学习，看到大家对我的认可和那种求知的欲望，我决定：利用空闲时间，从零到一开发一个项目，并在 csdn 上以博客的形式记录整个项目的开发过程和踩到的坑，提供相应的解决方案，也会将此项目进行开源，提供开源地址供大家参考学习。

因为工作比较忙，所以希望大家可以耐心等待一下，好的作品需要打磨。

倘若在学习过程中遇到什么问题，或者我的文章出现任何代码运行错误或者错别字的地方，亦或者是对项目有什么建议均可以添加文章底部我的私人微信进行交流沟通。

接下来，就让我们一起走进 Electron 的世界，让我们的前端开发者不再局限于 Web 应用。

项目背景与目标

项目背景

本项目旨在利用现代前端技术栈开发一款功能全面且用户体验优秀的跨平台桌面应用。我们希望通过该项目不仅能够实现一个实用的应用程序，同时也为社区提供一个学习和参考的实例，帮助初学者和有经验的开发者更好地理解如何 Electron 构建桌面应用。

学习目标

• 创建一个功能完善的桌面应用，包括但不限于文件管理、数据同步等功能。
• 提供一套完整的开发流程和博客，便于其他开发者学习和参考。
• 探索和分享使用技术栈在开发过程中遇到的问题及解决方案。

技术栈选型

• Vue3
• TypeScript
• Element Plus
• Nuxt.js
• Electron
• Axios
• ……

剩下的插件后续在过程中需要用到的时候会补充在过程的博客中，大致的方向是这个。

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

首先作为一个完整的项目，一定涉及到前端和后端，此处使用 Nuxt.js 作为后端语言，与前端页面和数据库进行交互，开发周期相较于 Java 等语言来说，开发周期会大大缩减，前端采用 Vue3 是因为 Vue3 目前是最新的 Vue 版本，Vue2 已经不再维护了，所以采用 Vue3 ，加深大家对 Vue3 的印象。

其次，站在项目的角度，此次项目的核心目的是学习如何使用 Electron 完成 Desktop 应用的开发，核心并不在后端或者前端的项目，所以选择什么语言开发并不重要，大家可以专注在 Electron 的代码。

预期读者群体及前置知识储备

预期读者

• 对使用 Web 技术开发桌面应用感兴趣的前端开发者。
• 希望了解和学习 Electron 及相关技术栈的开发人员。
• 有兴趣探索现代前端技术在桌面应用中的应用的开发者。
• 工作中需要开发桌面应用业务的前端开发团队。

前置知识储备

• 熟悉 HTML、CSS 和 JavaScript。
• 对 Vue.js 或 Vue 3 有一定的了解。
• 具备基本的 TypeScript 使用经验。
• 对 Node.js 和 npm/yarn 有一定的了解。
• 了解基本的前端构建工具（如 Webpack）。
• 了解 Nuxt.js 的应用。
• 了解 Electron 的应用。

结语

在这篇文章中，我们将踏上一段奇妙的旅程，探索一个充满挑战与机遇的世界。无论是对新技术的好奇心驱使，还是出于对未知领域的渴望，我们都将一同揭开这一主题神秘的面纱。