使用vue-cli创建electron项目

1. 安装Vue CLI

首先，需要确保已经安装了Node.js和npm。然后在终端中输入以下命令来安装Vue CLI：

npm install -g @vue/cli

2. 创建Vue项目

在终端中输入以下命令来创建一个新的Vue项目：

vue create my-electron-app

在创建过程中，可以选择使用默认配置或手动选择插件和配置。

3. 安装electron-builder

在终端中输入以下命令来安装electron-builder：

npm install electron-builder --save-dev

4. 配置package.json

在package.json文件中添加以下内容：

"build": {
  "productName": "MyElectronApp",
  "appId": "com.example.my-electron-app",
  "directories": {
    "output": "build"
  },
  "files": [
    "dist/**/*",
    "node_modules/**/*",
    "package.json"
  ],
  "win": {
    "icon": "public/icon.ico",
    "target": "nsis"
  },
  "nsis": {
    "oneClick": false,
    "allowElevation": true,
    "installerIcon": "public/icon.ico",
    "uninstallerIcon": "public/icon.ico",
    "installerHeaderIcon": "public/icon.ico",
    "createDesktopShortcut": true,
    "createStartMenuShortcut": true,
    "shortcutName": "MyElectronApp"
  }
}

其中，productName、appId、icon等可以根据实际情况进行修改。

5. 修改main.js

在src/main.js文件中添加以下内容：

const { app, BrowserWindow } = require('electron')

let win

function createWindow() {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('dist/index.html')

  win.on('closed', () => {
    win = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

6. 编译打包

在终端中输入以下命令来编译打包应用：

npm run build

打包后的应用程序将保存在build目录中。

7. 运行应用

在终端中输入以下命令来启动应用：

npm start

应用程序将在Electron中运行。