vue 项目怎么使用electron

要在vue项目中使用electron，首先需要安装并配置好electron相关的依赖。可以使用vue-cli来创建一个vue项目，然后在项目根目录下执行命令安装electron依赖：

npm install electron --save-dev

安装完成后，需要配置package.json文件，将main.js指定为electron的入口文件，并添加启动electron的命令：

"main": "main.js",
"scripts": {
  "electron": "electron ."
}

然后在项目根目录下创建main.js文件作为electron的入口文件，编写electron的启动代码。在main.js中可以引入electron模块，创建一个窗口并加载vue项目生成的dist目录下的index.html文件：

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

let mainWindow 

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  })
  mainWindow.loadURL(`file://${__dirname}/dist/index.html`)
})

接下来，需要在vue项目中创建一个打包配置文件webpack.electron.conf.js，用来配置vue项目的打包输出目录和文件名。在vue项目的package.json文件中，添加electron的启动命令：

"scripts": {
  "build:electron": "vue-cli-service build --mode production && electron ."
}

执行以上步骤后，就可以使用npm run build:electron命令来打包vue项目并启动electron应用了。这样就成功在vue项目中使用electron了。