vite+vue3+electron搭建项目

原创已于 2023-12-14 14:44:43 修改 · 1.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#electron #javascript #前端

于 2023-12-14 10:27:21 首次发布

electron 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用VSCode编辑器初始化Vite项目，下载依赖，配置Electron入口，安装nodemon监控并启动Electron应用，以及管理窗口大小和预加载JS。

编辑器使用vscode，打开一个空文件夹

第一步初始化vite项目

初始化vite项目，命令 npm init vite

在这里插入图片描述

第二步下载依赖

进入新建的项目，下载依赖，命令 
cd vite-projec 
npm i

在这里插入图片描述

第三步使用cnpm下载 electron依赖

新建一个终端，确认在项目目录下，运行命令 
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm i electron -D
成功将在package.json里面新增electron依赖

在这里插入图片描述

第四步新建main.js文件与入口

1、项目目录下新建main.js文件
2、package.json里面新增配置  "main": "main.js",

在这里插入图片描述
main.js内容如下：

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

const createWindow = () => {
    const win = new BrowserWindow({
        width: 1000,
        height: 800
    })
	// 如果没有修改vite端口 默认为5173
    win.loadURL("http://localhost:5173")
}

app.whenReady().then(() => {
  createWindow();
  
  app.on('activate', () => {
    // 在 macOS 系统内, 如果没有已开启的应用窗口
    // 点击托盘图标时通常会重新创建一个新窗口
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
});

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态, 
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
  })

第五步安装nodemon启动eletron

Nodemon 是一款非常实用的工具，用来监控你 node.js 源代码的任何变化和自动重启你的服务器。
查看帮助命令 npx nodemon --help
1、安装命令 
cnpm i nodemon -D
2、package.json文件新增启动命令
"start": "nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue"

在这里插入图片描述

运行 npm start ，如果运行出错，删掉package.json里面 “type”: “module”,

安装electron-win-state控制窗口大小与打开调试窗口

1、 安装命令 cnpm i electron-win-state -D
2、main.js引入electron-win-state

在这里插入图片描述
main.js引入electron-win-state

const { app, BrowserWindow } = require("electron");
// 引入
const WinState = require('electron-win-state').default

const createWindow = () => {
	// 默认宽高
  const winState = new WinState({
    defaultWidth: 1000,
    defaultHeight: 800
  }) 
  const win = new BrowserWindow({
    // 删掉之前的宽高，使用winState来接管
    ...winState.winOptions,
    webPreferences: {
        // preload: ''
    }
  });

  win.loadURL("http://localhost:5173");
  // 打开调试窗口
  win.webContents.openDevTools()
  // 控制打开窗口大小为上一次关闭时的大小
  winState.manage(win)
};

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

添加定义预加载的JS

1、项目目录下新建preload文件夹，文件夹下新建index.js，内容自定义
2、在main.js里引入path，将webPreferences.preload值修改为index.js的路径

在这里插入图片描述

完整main.js内容

const { app, BrowserWindow } = require("electron");
const path = require('path')
const WinState = require('electron-win-state').default

const createWindow = () => {

  const winState = new WinState({
    defaultWidth: 1000,
    defaultHeight: 800
  }) 
  const win = new BrowserWindow({
    // 删掉之前的大小，使用winState来接管
    // 自定义窗口状态
    ...winState.winOptions,
    webPreferences: {
        // 定义预加载的js
        preload: path.resolve(__dirname, './preload/index.js')
    },
    show: false
  });

  win.loadURL("http://localhost:3000");
  // 打开调试窗口
  win.webContents.openDevTools()
  // 控制打开窗口大小为上一次关闭时的大小
  winState.manage(win)
  // 优雅打开窗口 设置上方show: false
  win.on('ready-to-show',() => {
    win.show()
  }
  )
};

app.whenReady().then(() => {
  createWindow();
  
  app.on('activate', () => {
    // 在 macOS 系统内, 如果没有已开启的应用窗口
    // 点击托盘图标时通常会重新创建一个新窗口
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
});

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态, 
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
  })