在上一节课中，我们从零新建了一个electron项目，目的是让大家理解electron项目原理和基本框架，那么这节课我们将引入VUE，实现VUE与electron的整合，因为做前端开发如果不用VUE，那简直都不好意思说出去。

用vue-cli-plugin-electron-builder创建项目

使用方法也非常简单。首先用过vue cli创建一个vue项目

vue create myproject

创建好项目之后，进入项目所在目录，添加插件

cd myproject
vue add @matthijsburgh/electron-builder

添加好插件之后，运行以下命令就可以启动程序了。

yarn electron:serve

# 或

npm run electron:serve

启动界面如下

要打包，只要运行以下命令即可

yarn electron:build

# 或

npm run electron:build

如果你的node版本太高，会出现如下的错误：

yarn run v1.22.19
warning ../../package.json: No license field
$ vue-cli-service electron:build
 INFO  Bundling render process:
All browser targets in the browserslist configuration have supported ES module.
Therefore we don't build two separate bundles for differential loading.


⠙  Building for production...

 DONE  Compiled successfully in 1882ms                                                                                                                    15:01:27

  File                                                  Size                                                Gzipped

  dist_electron/bundled/js/chunk-vendors.7e358cf0.js    74.63 KiB                                           27.93 KiB
  dist_electron/bundled/js/app.30a49bb2.js              13.08 KiB                                           8.41 KiB
  dist_electron/bundled/css/app.2cf79ad6.css            0.33 KiB                                            0.23 KiB

  Images and other types of assets omitted.
  Build at: 2023-11-07T07:01:27.167Z - Hash: 01738ea86ae22945 - Time: 1882ms

 DONE  Build complete. The dist_electron/bundled directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
       
⠸  Bundling main process...

 ERROR  Failed to compile with 1 errors                                                                                                                   15:01:27

 error  

background.js from Terser
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:69:19)
    at Object.createHash (node:crypto:133:10)

只需要修改package.json文件，修改electron:build部分即可。

# mac or linux
"electron:build": "export NODE_OPTIONS=--openssl-legacy-provider vue-cli-service electron:build",

# window
"electron:build:window": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service electron:build",

完整代码如下：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service electron:build",
    "electron:build:window": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },

用electron-vite创建项目

创建项目

如果你习惯于用vite和typescript，也可以通过electron-vite来创建项目。运行一行命令就可以创建一个整合了VUE的electron项目了，命令如下：

npm create electron-vite

✔ Project name: … electron_demo
✔ Project template: › Vue

Scaffolding project in /Users/menglikun/git/electron_demo...

Done. Now run:

  cd electron_demo
  npm install
  npm run dev

是不是很简单？创建好项目后，安装提示进入项目所在的目录，运行命令npm install然后再运行npm run dev就可以启动程序了。注意npm install可能比较慢，慢慢等待一下，或者检查一下你的镜像设置是否有问题。没有意外的话，运行npm run dev将启动如下的程序界面。

进一步开发

接着的开发就很简单了，因为大部分的内容都是VUE相关的内容，这里是不是要移步到VUE开发教程了：）

编译成可执行程序

要把应用编译成可执行程序，同样可以使用Electron Forge.参考该系列文章的第一节即可。

目录CONTENT

electron应用开发系列教程[2]-与VUE整合