当前位置： 首页 > news >正文

创建vue+electron项目流程

news 2026/2/9 3:42:53 
一个vue3和electron最基本的环境搭建步骤如下：// 安装 vite + vue3 + vite-plugin-vue-setup-extend + less + normalize.css + mitt + pinia + vue-router
npm create vue@latest
npm i vite-plugin-vue-setup-extend -D
npm i less -D
npm i normalize.css -S  （在vue的main.js引入：import 'normalize.css'）
npm i mitt -S (链接：https://blog.csdn.net/weixin_50236973/article/details/143649070)
npm i pinia -S (链接：https://blog.csdn.net/weixin_50236973/article/details/143634741)
npm i vue-router -S (链接：https://blog.csdn.net/weixin_50236973/article/details/143606887)// vite.config.ts内配置vite-plugin-vue-setup-extend
export default defineConfig({plugins: [vue(),VueSetupExtend()],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})// 安装electron，然后在根目录下创建main.js文件， package.json也要配置main：main.js
npm i electron -D// 安装nodemon, 监听js css html vue文件发生变化后重新渲染，然后配置package.json
npm i nodemon -D"scripts": {"start": "nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue"
}// 安装electron-win-state，记录窗口停留的位置
npm i electron-win-state -S// 创建preload文件夹，创建一个index.js// 完善一下官网的案例
app.whenReady().then(() => {createWindow()app.on('activate', () => {// const {BrowserWindow} = require('electron')if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})

具体项目信息查看本地上传的资源， 这里就的代码只拷贝一部分比较重要的

// main.js
const {app, BrowserWindow} = require('electron')
const path = require('path')const WinState = require('electron-win-state').defaultfunction createWindow() {const winState = new WinState({defaultWidth: 1000,defaultHeight: 800,// 给打开的窗口命名electronStoreOptions: {name: 'window-state-open'}})const win = new BrowserWindow({...winState.winOptions,webPreferences: {preload: path.resolve(__dirname, 'preload/index.js'),sandbox: false},})win.loadURL('http://localhost:5173')winState.manage(win)
}app.whenReady().then(() => {createWindow();app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})
// package.json
{"name": "readit","version": "0.0.0","description": "first electron app","private": true,"main": "main.js","scripts": {"dev": "vite","build": "run-p type-check \"build-only {@}\" --","preview": "vite preview","build-only": "vite build","type-check": "vue-tsc --build --force","start": "nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue"},"dependencies": {"vue": "^3.5.12"},"devDependencies": {"@tsconfig/node22": "^22.0.0","@types/node": "^22.9.0","@vitejs/plugin-vue": "^5.1.4","@vue/tsconfig": "^0.5.1","electron": "^33.2.0","electron-win-state": "^1.1.22","nodemon": "^3.1.7","npm-run-all2": "^7.0.1","typescript": "~5.6.3","vite": "^5.4.10","vite-plugin-vue-devtools": "^7.5.4","vue-tsc": "^2.1.10"}
}
// index.html
<!DOCTYPE html>
<html lang=""><head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 去掉窗口的Content-Security-Policy警告，告诉该页面的内容是使用本地的 --><meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; script-src 'self'; style-src 'self' 'unsafe-inline'"><title>Vite App</title></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body>
</html>

相关文章：

创建vue+electron项目流程

一个vue3和electron最基本的环境搭建步骤如下&#xff1a;// 安装 vite vue3 vite-plugin-vue-setup-extend less normalize.css mitt pinia vue-router npm create vuelatest npm i vite-plugin-vue-setup-extend -D npm i less -D npm i normalize.css -S &#xff0…...

编程日记 2024/11/18 11:14:28

3. 用Ruby on Rails创建一个在线商城

哎呀&#xff0c;你这是想要我写一篇超长篇的Ruby on Rails教程啊&#xff01;好吧&#xff0c;既然你这么热情&#xff0c;那我就勉为其难地给你来一篇生动有趣、充满比喻夸张讽刺修辞手法的教程吧&#xff01; 1. 准备工作 1.1. 安装Ruby和Rails 1.1.1 安装Ruby 下载Ruby…...

编程日记 2024/11/18 11:13:26

jmeter常用配置元件介绍总结之配置元件

系列文章目录 1.windows、linux安装jmeter及设置中文显示 2.jmeter常用配置元件介绍总结之安装插件 3.jmeter常用配置元件介绍总结之线程组 4.jmeter常用配置元件介绍总结之函数助手 5.jmeter常用配置元件介绍总结之取样器 6.jmeter常用配置元件介绍总结之jsr223执行pytho…...

编程日记 2024/11/18 11:12:24

SpringBoot获取请求参数

spring boot获取请求参数 文章目录 spring boot获取请求参数一、简单参数二、实体参数三、数组集合参数四、日期参数五、Json参数六、路径参数 开头概述 在Spring Boot框架中&#xff0c;处理HTTP请求并获取请求参数是开发Web应用程序中的一项基本任务。无论是简单的GET请求还是…...

编程日记 2024/11/18 11:11:22

【数据结构】树——顺序存储二叉树

写在前面 在学习数据结构前&#xff0c;我们早就听说大名鼎鼎的树&#xff0c;例如什么什么手撕红黑树大佬呀&#xff0c;那这篇笔记不才就深入浅出的介绍二叉树。 文章目录 写在前面一、树的概念及结构1.1、数的相关概念1.2、数的表示1.3 树在实际中的运用&#xff08;表示文…...

编程日记 2024/11/18 11:09:20

Android中perform和handle方法的区别——以handleLaunchActivity与performLaunchActivity为例

在Android系统中&#xff0c;perform和handle方法经常出现在关键流程中&#xff0c;分别承担不同的职责。这种命名约定反映了框架设计中的分层思想&#xff0c;帮助开发者区分任务的调度与实现。本文通过handleLaunchActivity和performLaunchActivity这两个典型方法的源码分析&…...

编程日记 2024/11/18 11:07:16

聊聊依赖性测试

在软件测试中&#xff0c;我们常常面临一个挑战&#xff1a;多个模块之间高度耦合&#xff0c;任何一个模块的异常都可能导致整个系统崩溃。如何确保这些模块之间的协作无缝衔接&#xff1f;这就需要依赖性测试的助力&#xff01; 什么是依赖性测试&#xff1f;它与功能测试、…...

编程日记 2024/11/18 11:06:14

C++11————线程库

thread 类的简单介绍 在 c11 之前&#xff0c;涉及到多线程问题&#xff0c;都是和平台相关的&#xff0c;比如 windows 和 linux 下各自有自己的接口&#xff0c;这使得代码的可移植性比较差。在 c11 中引入了线程库&#xff0c;使得 c在编程时不需要依赖第三方库了 函数名 …...

编程日记 2024/11/18 11:04:11

Java 动态代理初步

动态代理初步 package ReflectExercise;import ReflectExercise.pojo.BigStar; import ReflectExercise.pojo.ProxyUtil; import ReflectExercise.pojo.Star;/*** 动态代理* 无侵入的给方法增强功能*/ public class ReflectExercise {public static void main(String[] args) {…...

编程日记 2024/11/18 11:03:05

应用系统开发（10) 钢轨缺陷的检测系统

涡流检测系统框图 其中信号发生器为一定频率的正弦信号作为激励信号&#xff0c;这个激励信号同时输入给交流电桥中的两个检测线圈&#xff0c;将两个线圈输出的电压差值作为差分信号引出至差分放大电路进行放大&#xff0c;经过放大后信号变为低频的缺陷信号叠加在高频载波上…...

编程日记 2024/11/18 11:01:55

理解 \r、\n、\r\n 和 \n\r：换行符的区别和用法

\r&#xff08;回车&#xff0c;Carriage Return&#xff09;&#xff1a; ASCII 码 13&#xff0c;对应的控制字符是 CR&#xff0c;将光标回到当前行的行首(而不会换到下一行)&#xff0c;之后的输出会把之前的输出覆盖。\n&#xff08;换行&#xff0c;Line Feed&#xff09…...

编程日记 2024/11/18 11:00:52

【jvm】StringTable为什么要调整

目录 1. 永久代内存限制与回收效率2. 堆内存的优势3. JDK版本的演进4. 实际应用的考虑 1. 永久代内存限制与回收效率 1.内存限制&#xff1a;在JDK 6及之前的版本中&#xff0c;StringTable位于永久代&#xff08;PermGen space&#xff09;中。然而&#xff0c;永久代的内存空…...

编程日记 2024/11/18 10:57:48

AI 驱动低代码平台：开创智能化用户体验新纪元

一、引言 人工智能技术如汹涌浪潮般迅猛发展&#xff0c;在各个行业掀起了颠覆性的变革风暴。于软件开发领域而言&#xff0c;AI 辅助编程与低代码平台的完美结合已然成为关键趋势&#xff0c;极大地提高了开发效率。然而&#xff0c;低代码平台的使命绝非仅仅局限于简化开发流…...

编程日记 2024/11/18 10:53:42

谈一谈QThread::CurrentThread和this-＞thread

QThread::CurrentThread是指的当前函数调用者者所在的线程 this->thread是指的当前对象所在的线程&#xff08;对象创建出来的时候所在的线程&#xff09; Qt文档说明 CurrentThread返回一个指向管理当前执行线程的QThread的指针 thread返回对象所在的线程 这两个函数所…...

编程日记 2024/11/18 10:47:36

ThriveX 博客管理系统前后端项目部署教程

前端 前端项目地址&#xff1a;https://github.com/LiuYuYang01/ThriveX-Blog 控制端项目地址&#xff1a;https://github.com/LiuYuYang01/ThriveX-Admin Vercel 首先以 Vercel 进行部署&#xff0c;两种方式部署都是一样的&#xff0c;我们以前端项目进行演示 首先我们先…...

编程日记 2024/11/18 10:43:29

STM32单片机设计防儿童人员误锁/滞留车内警报系统

目录 目录 前言 一、本设计主要实现哪些很“开门”功能&#xff1f; 二、电路设计原理图 1.电路图采用Altium Designer进行设计&#xff1a; 2.实物展示图片 三、程序源代码设计 四、获取资料内容 前言 近年来在车辆逐渐普及的情况下&#xff0c;由于家长的疏忽&#xff0c;将…...

编程日记 2024/11/18 10:42:24

可认证数据资产合约标准协议（CMIDA-1）意见征集

标准背景 数据资产具备多维度的属性&#xff0c;涵盖行业特性、状态信息、资产类型、存储格式等。数据资产在不同流通主体之间可理解、可流通、可追溯、可信任的重要前提之一是存在统一的标准&#xff0c;缺失统一的标准&#xff0c;数据混乱冲突、一数多源、多样多类等问题将…...

编程日记 2024/11/18 10:40:20

Cyberchef配合Wireshark提取并解析HTTP/TLS流量数据包中的文件

本文将介绍一种手动的轻量级的方式&#xff0c;还原HTTP/TLS协议中传输的文件&#xff0c;为流量数据包中的文件分析提供帮助。 如果捕获的数据包中存在非文本类文件&#xff0c;例如png,jpg等图片文件&#xff0c;或者word&#xff0c;Excel等office文件异或是其他类型的二进…...

编程日记 2024/11/18 10:39:19

MYSQL- 展示事件信息 EVENTS 语句（十八）

13.7.5.18 SHOW EVENTS 语句 SHOW EVENTS[{FROM | IN} schema_name][LIKE pattern | WHERE expr]此语句显示有关事件管理器事件的信息&#xff0c;这些信息在第23.4节“使用事件调度器”中进行了讨论。它要求显示事件的数据库具有EVENT权限。 以最简单的形式&#xff0c;SHOW…...

编程日记 2024/11/18 10:38:16

如何在react中使用react-monaco-editor渲染出一个编辑器

一、效果展示 二、基于vite配置 1.首先安装react-monaco-editor和monaco-editor包 npm add react-monaco-editor npm i monaco-editor 2.其次创建一个单独的文件&#xff08;此处是tsx、直接用app或者jsx也行&#xff09; import { useState, useEffect } from react impo…...

编程日记 2024/11/18 10:37:14

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

编程新知 2025/12/14 22:32:59

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/9/14 7:59:52

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2026/1/22 6:07:24

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

编程新知 2026/2/7 15:39:49

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2026/1/31 3:30:33

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

编程新知 2026/2/6 1:00:00

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2026/1/30 4:47:24

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

编程新知 2025/11/28 5:32:31