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

本文主要是介绍Vue3项目-Electron构建桌面应用程序，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、创建Vue3项目

1、安装vue-cli

npm i -g @vue/cli#ORyarn 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;})
}// 创建主窗口
const createWindow = () => {let {width,height} = screen.getPrimaryDisplay().workArea;windows.main.win = new BrowserWindow({width: width,height: height,show: true,frame: false,movable: true,resizable: true,webPreferences: {devTools: true,// 集成网页和 Node.js，也就是在渲染进程中，可以调用 Node.js 方法nodeIntegration: true,contextIsolation: false,webSecurity: false, //是否允许渲染进程访问本地文件//允许html页面上的javascript代码访问nodejs 环境api代码的能力（与node集成的意思）}})// 开发环境 development// 是生产环境 productionif (process.env.NODE_ENV != 'development') {windows.main.win.loadFile(path.join(__dirname, "../index.html"));} else {windows.main.win.loadURL(`http://${process.env['VITE_DEV_SERVER_HOST']}:${process.env['VITE_DEV_SERVER_PORT']}` + "/index.html");if (!process.env.IS_TEST) windows.main.win.webContents.openDevTools();}disableContextMenu(windows.main.win);
}// 系统托盘设置
const setTray = () => {//设置菜单内容let trayMenu = [{label: '退出', //菜单名称click: function () { //点击事件app.quit();}}];let trayIcon = null;//设置托盘区图标if (process.env.NODE_ENV != 'development') {trayIcon = path.join(__dirname, '../favicon.ico');} else {trayIcon = path.join(__dirname, '../../public/favicon.ico');}appTray = new Tray(trayIcon);//设置菜单const contextMenu = Menu.buildFromTemplate(trayMenu);//设置悬浮提示appTray.setToolTip('xxxxxxxxx');//设置appTray.setContextMenu(contextMenu);//点击图标appTray.on('click', function () {//显示主程序if (windows.main.win) windows.main.win.show();});
}// 监听ipcMain请求
const listenIPC = () => {// 最小化ipcMain.on('min-app', () => {windows.main.win.minimize();});// 退出程序ipcMain.on('exit-app', () => {windows.main.win.close();})
}// 初始化app（Electron初始化完成时触发）
app.whenReady().then(() => {createWindow();setTray();listenIPC()// app.on('activate', () => {//     if (BrowserWindow.getAllWindows().length === 0) createWindow()// })
});app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})

4、vite.config.js配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
import path, { resolve, join } from 'path'
export default defineConfig({plugins: [vue(), electron({main: {entry: "electron/index.js"}})],resolve: {alias: {"@": resolve(__dirname, 'src'), // 这里是将src目录配置别名为 @ 方便在项目中导入src目录下的文件}},
})

5、package.json配置

{"name": "vite-project","private": true,"version": "0.0.0","main": "dist/electron/index.js", // 这里必须配置为dist/electron/index.js"scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},"dependencies": {"vue": "^3.2.47","@element-plus/icons-vue": "^2.1.0","axios": "^1.3.4","echarts": "^5.4.3","element-plus": "^2.3.0","pinia": "^2.1.7","qs": "^6.11.1","vue-draggable-resizable": "^2.3.0","vue-router": "^4.2.4"},"devDependencies": {"@vitejs/plugin-vue": "^4.1.0","electron": "^19.0.10","vite": "^4.2.0","vite-plugin-electron": "^0.8.3","less": "^4.1.3","less-loader": "^11.1.0"}
}

三、项目其他配置

1、main.js配置

// 模块导入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import { createPinia } from "pinia";
import VueDraggableResizable from 'vue-draggable-resizable/src/components/vue-draggable-resizable.vue'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import ModelAssembly from './components/common/ModelAssembly.vue';
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'// 创建APP
const app = createApp(App);// 创建Pinia
const pinia = createPinia();//使el-input自动聚焦 所有页面都可使用 v-focus使用
app.directive('focus', {mounted: (el) => el.querySelector('input').focus()
})// 注册全局组件
app.component('ModelAssembly', ModelAssembly)//注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component) //注册组件图标
}app.component('vue-draggable-resizable', VueDraggableResizable)
app.use(router);
app.use(pinia);
app.use(ElementPlus);
app.mount("#app");

2、pinia配置

import { defineStore } from "pinia"
export const useIndexStore = defineStore('indexStore', {// 其它配置项state: () => {return {};},getters: {},actions: {}
})

3、router配置

import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [{path: '/', redirect: "/home"},{path: '/home',component: () => import('@/views/Home.vue'),},];
const router = createRouter({history: createWebHashHistory(),routes
});
export default router;

这篇关于Vue3项目-Electron构建桌面应用程序的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---