vue+electron第一篇——创建一个桌面应用

创建一个vue项目

请检查是否存在node环境, 我的node、vue环境,请把node升级到最新，vue cli也升级一下。

image.png

vue create vue2_electron

cd vue2_electron 

运行下项目

npm run serve

如果项目能够正常运行如下图所示，表示代码运行正常，端口号不一定是8080

image.png

在终端（cmd）中输入Ctrl+c停止运行，接下来集成electron，安装vue-cli-plugin-electron-builder插件。

vue add electron-builder

image.png

出现上图所示，表示运行成功，出现下图所示内容

image.png

配置electron 的node环境在vue.config.js中配置下列代码

pluginOptions:{
        electronBuilder:{
            nodeIntegration:true
        }
    }

如下图所示

image.png

还需要在跟目录中配置background.js中配置下图代码

image.png

从v9版本开始，remote除非将设置enableRemoteModule为true，否则不允许在渲染器上使用。
在页面中使用path，和remote

image.png

运行结果如下图所示

image.png

报错：(electron) The remote module is deprecated. Use https://github.com/electron/remote instead.
这是因为从v12开始，remote被弃用，需要外部引入@electron/remote

//安装@electron/remote
npm install --save @electron/remote