从无到有构建electron+vite+vue3

需要使用到nodejs和npm 如果没有的话 ，请先装好，我给出个教程链接，先不细说了。

Nodejs和npm安装:node.js和npm的安装与环境配置（2021最新版）_2021年的npm是什么版本-CSDN博客

yarn安装与验证:

npm i -g yarn
yarn -v

1.创建一个vite+vue应用，使用js。我默认项目名称为:electron_study

yarn create vite electron_study

然后会弹出这个界面：

我们选择Vue就好了。下一步则选择JavaScript。

直到弹出

我们依次输入这三行命令

cd electron_study
yarn
yarn dev

执行 "yarn"的时候可能时间会比较长(取决于网络环境，可以换源，我这边深圳的用华为的源就很快)

最后一行命令是启动前端服务(可以不执行)，执行到这里相当于你已经成功创建了一个vite+vue3的web服务了，然后我们还需要把这个前端的框架跟我们的electron结合起来

然后我们再从vs code 打开这个项目

2.安装其他依赖

我们除了基础的项目框架外，还需要一系列的依赖，分别是：

electron | concurrently | cross-env | electron-builder | wait-on

yarn add electron concurrently cross-env electron-builder wait-on -D

在等待安装完成的时候，我们同时在项目文件夹下创建一个文件目录，名为：electron，然后在这个目录下创建一个main.js文件(注意，这个与vue下面的src的main.js不一样)，两个文件是独立的

然后在main.js里面给入这样一段初始代码，用来创建electron桌面程序的窗口

const {app,BrowserWindow,Tray, Menu}= require('electron')
const path = require('path')
const NODE_ENV = process.env.NODE_ENV

function createWindow(){
        const win = new BrowserWindow({
                width:800,
                height:600,
                //autoHideMenuBar:true
        })
       win.loadURL(
        NODE_ENV ==="development"?
        "http://localhost:5173":
        `file://${path.join(__dirname,"../dist/index.html")}`
       )
}

app.on('ready',()=>{
        createWindow();
})//当app ready时创建窗口

app.on('window-all-closed',function(){
        if(process.platform !=="darwin") 
        {
                app.quit()
        }
})//当窗口被全部关闭时，退出app

然后我们需要配置一下根目录下面的package.json

{
  "name": "vite-electron",
  "private": true,
  "version": "0.0.0",
  "main": "electron/main.js",
  "scripts": {
    "electron:serve": "concurrently -k \"vite\" \"wait-on tcp:5173 && cross-env NODE_ENV=development electron .\"",
    "electron:build": "vite build && electron-builder",
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "electron": "wait-on tcp:5173 && cross-env NODE_ENV=development electron ."
  },
  "build": {
    "productName": "electron",
    "files": [
      "dist/**/*",
      "electron/**/*"
    ]
  },
  "dependencies": {
    "vue": "^3.4.35"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.1.2",
    "concurrently": "^8.2.2",
    "cross-env": "^7.0.3",
    "electron": "^31.3.1",
    "electron-builder": "^24.13.3",
    "vite": "^5.4.0",
    "wait-on": "^7.2.0"
  }
}

当这两个都配置好了之后，我们在控制台输入启动指令：yarn electron:serve

程序会分别依次执行，先是electron监听我们设置的端口(我上面设置的是5173)，然后是vue3+vite的项目

我们的配置文件里，我把编译的部分也写好了，也可以尝试着编译，编译后会出现dist文件夹，里面就会有编译后的程序和安装程序。

那么，到这里我们的基础环境就搞好了呢！

也欢迎各位访问我的个人博客：

https://somehelp.site 谢谢观看