🎉 前言
在这个数字化时代，使用Electron和Vue.js构建跨平台桌面应用变得越来越流行。这篇入门教程将带你一步步了解如何创建一个基础的Electron-Vue项目，并提供一些实用的代码示例。
🛠️ 环境搭建
首先，确保你的开发环境中安装了Node.js。打开终端或命令提示符，输入`node -v`来验证是否已安装。接下来，通过npm（Node Package Manager）安装Electron和Vue CLI。只需运行以下命令：
```
npm install -g electron
npm install -g @vue/cli
```
🔨 创建项目
使用Vue CLI快速搭建项目框架。执行以下命令来初始化一个新的Vue项目：
```
vue create my-electron-vue-app
```
进入项目目录并添加Electron依赖：
```
cd my-electron-vue-app
npm install electron --save-dev
```
💻 配置Electron
在项目根目录下创建一个名为`main.js`的新文件，这是Electron应用的主要入口点。配置基本的窗口设置：
```javascript
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadURL('http://localhost:8080')
}
app.whenReady().then(createWindow)
```
💡 运行应用
现在可以运行项目了！在终端中执行：
```
npm run serve
```
然后在另一个终端窗口中启动Electron：
```
npx electron .
```
你应该能看到一个简单的Vue应用在Electron窗口中运行。恭喜你，已经成功创建了一个Electron-Vue项目！
🔚 结语
本篇教程只是一个开始，希望它能激发你对Electron-Vue应用开发的兴趣。继续探索更多的功能和优化吧！🚀