electronvue项目搭建

1、创建vue项目

# 创建项目
npm create vite@latest electron

PS E:\Code\elertorn> npm create vite@latest electron
Need to install the following packages:
create-vite@6.3.1
Ok to proceed? (y) y

> npx
> create-vite electron

│
◇  Select a framework:
│  Vue
│  JavaScript
│
◇  Scaffolding project in E:\Code\elertorn\electron...
│
└  Done. Now run:

  cd electron
  npm install
  npm run dev

PS E:\Code\elertorn> cd .\electron\

# 安装依赖
npm i

2、修改配置文件

修改vite.config.js配置启动端口

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
    plugins: [vue()],
    server: {
        port: 3000,
    }
})

3、创建electron项目

（1）、在先项目的package.json项目下新增electron的配置

{
  "name": "electron",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "description": "Hello World!",
  "main": "main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "vite": "^6.2.0"
  }
}

（2）、安装electron

npm add electron -D

（3）、在scripts增加一条electron启动命令，完整的scripts

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "start" : "electron ."
  },

（4）、新增electron文件夹，并创建main.js，main.js设置url

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

const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600
    })

    // win.loadFile('./electron/index.html')
    win.loadURL("http://localhost:3000/")
}

app.whenReady().then(() => {
    createWindow()
})

// 关闭窗口
app.on("window-all-closed",() => {
    if (process.platform !== 'darwin') {}
})

配置同时启动项目

 npm add concurrently

修改package.json文件下scripts配置

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "start": "concurrently vite \" electron .\""
  },