本文介绍使用vite构建Electron项目,使用@vitejs/plugin-vue插件辅助完成vue3桌面应用,主要使用Vite,Vue,Electron,@vitejs/plugin-vue四个模块。
一 创建项目
1、输入命令 npm init vite
首先输入项目名称viteElectron,选择Vue框架和javascript语言
2、运行项目
输入命令:
cd viteElectron
npm install
npm run dev
效果如下:
二、安装electron
1.安装electron
输入以处命令,安装electron:
npm install electron --save-dev
三、完善项目
1.创建main.js
在根目录下,创建main.js,代码如下:
// 控制应用生命周期和创建原生浏览器窗口的模组
import {app,BrowserWindow } from 'electron'
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true; // 关闭控制台的警告
function createWindow () {
// 创建浏览器窗口
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// 书写渲染进程中的配置