Electron桌面应用开发日记:一、起步，整合Vue3

0.比你想象的更简单

如果你可以建一个网站，你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。

1.踩坑

开始之前，我在github上搜索了一下，发现两个不错的项目：

electron-vue-admin

electron-vue

但是这两个项目都是由于长时间未更新，electron的版本太低，vue版本是2.5，不太满足我的要求。我尝试将它们升级到最新版本，但最后以失败告终。。。

2.自己动手

2.1 环境准备

>node -v
v12.20.0
>yarn -v
1.22.10
>vue -V
@vue/cli 4.5.9

2.2 创建vue项目

>yarn create vite-app vue-electron-demo

进入项目目录，安装相关依赖并运行项目：

>cd vue-electron-demo
>yarn
>yarn dev

在浏览器中访问 http://localhost:3000

Vue3项目搭建完成。

2.3 集成electron

很简单，两步搞定：

>vue add electron-builder
>yarn add -D "@vue/cli-service"

安装完成后，直接运行命令：

>yarn electron:serve

应用程序启动成功！

2.4 最后一步

electron目前（2021.01.01）的最新版本是11.1.1，而electron-builder使用的版本是9.0.0，所以需要手动升级一下electron的版本。

安装一个package.json依赖升级工具：npm-check-updates

>npm install -g npm-check-updates

检测可升级的依赖：

>ncu

升级package.json中依赖的版本：

>ncu -u

重新安装依赖后再运行项目：

>yarn
>yarn electron:serve

最终的package.json:

{
  "name": "vue-electron-demo",
  "version": "0.0.1",
  "scripts": {
    "build": "vite build",
    "dev": "vite",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "dependencies": {
    "vue": "^3.0.4"
  },
  "devDependencies": {
    "@vue/cli-service": "^4.5.9",
    "@vue/compiler-sfc": "^3.0.5",
    "electron": "^11.1.0",
    "electron-devtools-installer": "^3.1.1",
    "vite": "^2.0.0-alpha.5",
    "vue-cli-plugin-electron-builder": "~2.0.0-rc.5"
  },
  "description": "vue electron demo",
  "keywords": [
    "vue",
    "electron"
  ],
  "author": "brian",
  "license": "MIT"
}

项目结构：

3.感谢

整个Vue生态

Electron

electron-builder