认识Electron

官网:https://www.electronjs.org/zh/docs/latest/tutorial/quick-start

Electron是一个开源的框架,用于构建跨平台的桌面应用程序。它由GitHub开发,并且基于Node.js和Chromium构建。Electron使开发者可以使用Web技术(HTML,CSS和JavaScript)来构建桌面应用程序,同时也可以访问操作系统的本地资源和功能,例如文件系统、系统通知、剪贴板等。

Electron的优点在于其易于使用和开发,同时也具有跨平台性和灵活性。许多知名的应用程序,如VS Code、Slack、GitHub Desktop和Spotify等,都是使用Electron构建的。

Electron + Vue联合使用

环境:

  1. Node
  2. 安装Vue脚手架
  3. 安装Electron

Node的安装这边不多讲,安装成功之后node -v,会显示版本,Vue脚手架安装这边简单讲下,我们在国内的npm非常慢,我们直接使用cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com

查看镜像是否设置成功:

cnpm config get registry

安装Vue脚手架工具:

cnpm install -g vue-cli

安装Electron:

cnpm install -g electron

官方示例仓库

GitHub:https://github.com/electron/electron-quick-start
有Git可以直接拉库,没有的手动下载。

  1. 克隆官方仓库

    git clone https://github.com/electron/electron-quick-start
  2. 克隆完成后,使用命令行进入目录

    cd electron-quick-start
  3. 安装依赖

    npm install
    //or
    yarn
    //or
    cnpm install
  4. 运行项目

    npm start

    运行后就可以看到官方示例的Electron项目

    electron-forge

    electron-forge 相当于 electron 的一个脚手架,可以让我们更方便的创建、运行、打包electron 项目。

  5. 安装

    cnpm install -g electron-forge
  6. 初始化项目

    electron-forge init my-app

    如果失败,还是可以使用cnpm,先删除my-app目录的node_module目录,如果没有的话就不管,然后运行代码:

    cnpm install
  7. 启动项目

    npm start

    如果启动提示报错:

    Electron forge was terminated:
    You must depend on "electron-prebuilt-compile" in your devDependencies

这个错误提示意味着你需要在你的项目的devDependencies中添加electron-prebuilt-compile依赖项。electron-prebuilt-compile是一个用于在开发环境中编译和运行Electron应用程序的依赖项。

npm install electron-prebuilt-compile --save-dev

接着重新启动即可。

最后修改:2023 年 05 月 03 日
如果觉得我的文章对你有用,请随意赞赏