electron-vue、
时间: 2025-02-12 08:22:06 浏览: 46
### Electron 和 Vue.js 整合使用教程
#### 一、开发环境准备
为了顺利开展基于 Electron 和 Vue.js 的项目,需先准备好必要的开发工具。这包括安装 Node.js 及 Vue CLI 工具[^1]。
```bash
npm install -g @vue/cli
```
上述命令用于全局安装 Vue CLI ,以便后续能通过该工具快速初始化新项目并管理依赖包。
#### 二、创建 Vue.js 应用程序
借助 Vue CLI 创建一个新的 Vue.js 项目结构非常简单:
```bash
vue create my-electron-app
cd my-electron-app
```
这里 `my-electron-app` 是项目的名称,在实际操作时可以根据个人喜好更改。进入新建好的文件夹之后就可以继续下一步配置了。
#### 三、集成 Electron 到现有 Vue.js 项目中
为了让普通的 Web 前端变成可独立运行的应用软件,还需要引入 Electron 来负责构建原生界面部分。可以通过 npm 安装 electron-builder 或者其他类似的打包工具来简化这个过程:
```bash
npm install --save-dev electron electron-builder
```
接着修改 package.json 文件中的 scripts 字段,添加启动脚本如下所示:
```json
{
"scripts": {
...
"electron:build": "vue-cli-service build && electron-builder",
"electron:start": "vue-cli-service serve & wait-on http://localhost:8080/ && electron ."
}
}
```
这段 JSON 配置允许开发者分别执行构建与即时预览功能;其中 `wait-on` 插件的作用是在确保本地服务器已经就绪后再开启 Electron 实例,从而避免加载失败的情况发生。
#### 四、编写主进程代码(main.js)
在 src 目录下新增 main.js 文件作为整个应用程序的核心控制逻辑入口点。下面是一个简单的例子说明如何利用 Electron API 打开浏览器窗口显示由 Vue 渲染的内容页面:
```javascript
const { app, BrowserWindow } = require('electron')
let mainWindow;
function createWindow () {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true
}
})
mainWindow.loadURL(`file://${__dirname}/dist/index.html`)
}
app.whenReady().then(createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
app.on('activate', function () {
if (mainWindow === null) createWindow()
})
```
此 JavaScript 脚本定义了一个名为 `createWindow()` 函数用来实例化一个具有指定尺寸大小的新窗口对象,并设置好相应的参数选项后调用了 loadURL 方法指向编译后的 HTML 文档路径。此外还监听了一些常见的生命周期事件以保证良好的用户体验。
#### 五、实现前后端分离架构案例分享
对于更复杂的企业级应用场景而言,则可能涉及到前后端分离的设计模式。此时可以参考开源项目 [electron-vue-spring](https://gitcode.com/gh_mirrors/el/electron-vue-spring),该项目展示了怎样把 Spring Boot 后台服务同前端 Vue 组件结合起来共同工作形成完整的解决方案[^3]。
阅读全文
相关推荐

















