electron重启后更新_Electron桌面应用开发日记：一、起步，整合Vue3

0.比你想象的更简单

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

1.踩坑

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

electron-vue-admin

electron-vue

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

2.自己动手

2.1 环境准备

>node -vv12.20.0>yarn -v1.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