Vue3项目-Electron构建桌面应用程序

呆呆的小草

已于 2024-08-19 10:49:35 修改

阅读量1k

点赞数 3

分类专栏： Vue 文章标签： electron vue.js javascript

于 2024-08-19 09:25:05 首次发布

本文链接：https://blog.youkuaiyun.com/StupidlyGrass/article/details/141310859

版权

一、创建Vue3项目

1、安装vue-cli

npm i -g @vue/cli
 
#OR
 
yarn global add @vue/cli

2、创建vue项目(vue3)

npm create vue@latest

3、创建完成后启动项目

cd project_name && npm run dev

二、electron配置

1、安装electron

npm install electron

2、安装vite-plugin-electron插件

npm install vite-plugin-electron

3、添加electron配置文件（项目/electron/index.js）

// -------------------------------<<模块导入>>-------------------------------
import { app, BrowserWindow, screen, ipcMain, Tray, Menu } from 'electron'
import path from 'path'
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

// -------------------------------<<变量声明>>-------------------------------
// 定义全局变量，获取窗口实例
const windows = {
    // 主窗口
    main: {
        win: null
    },
}

const defaultMENU = 0x116; //当弹出系统菜单时

//托盘区图标
var appTray = null;

// -------------------------------<<函数定义>>-------------------------------
//禁用窗口自带的右键菜单
const disableContextMenu = (win) => {
    win.hookWindowMessage(defaultMENU, () => {
        win.setEnabled(false);
        setTimeout(() => {
            win.setEnabled(true);
        }, 20);
        return true;