Electron 小白入门手册 ——前置准备

奥陌陌OumCc
288 阅读5分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情

概述

今天这期内容跟 Electron 没半毛钱关系，可随便食用。下文核心介绍两点内容：

  1. 接下来开发的环境准备
  2. 把“参考项目”先跑起来
    • 后续我们的开发会参考下文提到的“高仿网易云Mac客户端（React）”项目，先把这个参考项目跑起来，看着运行结果，借用别人的 API，开发自己的项目 ╮(￣▽￣)╭

环境准备

  1. nodejs
    • 截至 2022年08月18日 Electron 最新稳定版中配套的 nodejs 版本是 16.15.0，建议各位靓仔靓女可以用这个版本。这个可以在 Electron 官网 上查到：（ Electron 版本更新异常的快，各位看到这篇文章时，也许已经迭代了好几个版本 ）
  2. nvm
    • nvm 是一个 nodejs 的版本管理工具，可以让你的电脑中拥有多个 nodejs 版本，并且随时切换
    • 详细用法可以参考我之前的这篇 《如何使用nvm管理多个node版本》
    • PS：不一定要用 nvm，如果希望电脑中只保留一个 nodejs 环境，直接上 nodejs 也没问题。这个工具属于：有则方便一点，没有也问题不大的类型
  3. vscode
    • 个人比较习惯在 vscode 上开发，如果喜欢使用 WebStorm 开发的话也没问题，纯属个人喜好
  4. 包管理工具
    • npm ，这个应该不用多说了吧，nodejs 的官配
    • yarn
      • 如果是第一次了解这货的同学，可以简单理解成是升级版的 npm，解决了 npm 以前的一些痛点（随着 nodejs 和 npm 的不断更新，他们两者直接的差距在逐步缩小）
      • PS：这里有个小坑，我们目前用得比较多的还是 yarn v1 版本，直接使用 npm install --global yarn 就可以安装到全局。如果有兴趣了解 yarn v2 版本的同学，可以参考一下这篇文章：《升级Yarn 2，摆脱node_modules》
    • pnpm
      • 如果是第一次了解这货的同学，可以简单理解成是前两者的升升升级版，其核心也是针对前两者的痛点做了优化处理，详细可以看官网介绍
      • 使用 npm install -g pnpm 就可以安装到全局
    • PPS： 原则上呢，只用 npm 也是可以的，如果觉得有点乱，暂时不想有太多干扰的同学，完全可以只使用 npm 干到底。后续内容我会使用 pnpm，毕竟它的速度确实快，整个设计理念也很优秀，再加上是尤大推荐，尝尝鲜，看会不会有什么坑
  5. 操作系统
    • 这里说明一下，原则上用 windows 或 mac 都可以很顺利开发 Electron 桌面应用，大体上是差不多的，只是在打包、签名验证环节有点差异。在下只有一台 mac 工作机，后续内容都会在 mac 上展开，等后面讲到打包、签名验证时再看看有木有机会搞台 windows ，补充一下这部分在 windows 上的细节

参考项目

这个专栏打算以项目实战作为引线，串联起 Electron 入门中各个环节的细节，所以呢，肯定要找一个项目来做做。在掉光了仅剩的 3 根头发后，终于找到一个比较合适且喜欢的项目，还有更多很好的练手可以参考：《盘点 10 个 GitHub 上的前端高仿项目》

目前我选的是这个：《高仿网易云Mac客户端（React）》，这个项目拉下来跑过，比较顺利，可以直接跑起来。里面涉及到三个项目：

  1. react-netease-music
    • 这个是前端界面，到 github 上拉下来，进入项目根目录，执行 pnpm i 安装依赖
      • PS：因为其项目目录下预留的是 pnpm-lock.yaml 文件，这个是 pnpm 锁定依赖版本号的文件，所以就直接用 pnpm 安装。还是那句话，如果不想麻烦，直接用 npm ，执行 npm i 安装依赖也是完全木有问题滴 (～￣▽￣)～
    • 安装好依赖后，直接执行 pnpm run dev:local 启动本来开发服务
  2. NeteaseCloudMusicApi
    • 这个是用来提供 api 接口的，详细可以参考：网易云音乐 API -网易云音乐 NodeJS 版 API
    • 同样，到 github 上拉下来后，进入项目根目录，执行 npm i 安装依赖
      • PS：这个项目预留的是 package-lock.json —— npm 的锁定依赖版本号的文件，所以直接用 npm 安装
    • 安装好依赖后，直接执行 npm start 启动本来开发服务
  3. express-graphql-server
    • 这个也是用来提供 api 接口的，同样，到 github 上拉下来后，进入项目根目录，执行 yarn 安装依赖
      • PS：这个项目预留的是 yarn.lock —— yarn 的锁定依赖版本号的文件，所以直接用 yarn 安装
    • 安装好依赖后，直接执行 start:local 启动本来开发服务

处理好上面的依赖安装和启动本地开发服务后，就可以直接在浏览器中访问：http://localhost:8080

然后就可以看到下图效果：

还可以，高仿项目细节做得确实不错，跑起来也挺顺利的

上面三个项目我都 fork 了下来，避免后续原作者有大的变动导致各位在跟着这篇文章实践时有比较大的出入，项目原作者的 github 地址分别是：react-netease-music、NeteaseCloudMusicApi、express-graphql-server

此次就学完了本文的所有内容 （づ￣3￣）づ╭❤～

老规矩，对文中任何一点有疑问的欢迎在评论区留言，一起完善文章内容 (￣▽￣)~*

个人比较喜欢输出简短的文章，后续内容也会拆得比较碎，尽量把要讲的、该讲的在每篇文章中都清晰表达出来。行文太长的话，感觉读起来也不太好消化（可能也是以前上学时每节课只有 40 分钟的原因吧~）

avatar
文章
阅读
粉丝