我们首先创建一个Electron主进程,用于处理应用程序的主要逻辑。 创建一个新的main.ts文件,并添加以下代码: import{app,BrowserWindow}from'electron';functioncreateMainWindow(){constwin=newBrowserWindow({width:800,height:600,webPreferences:{nodeIntegration:true,},});win.loadURL('http://localhost:3000');}app...
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入Chromium和Node.js到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。 TypeScript是微软开发的一个开源的编程语言,通过在JavaScript的基础上添加静态类型定义...
vite-plugin-electron:vite 结合 electron 的库,关于这个插件可以参见 Vite 与 Electron 无缝衔接 electron-devtools-installer:electron 开发工具 vite-plugin-electron 插件是将 vite 和 electron 结合在一起的,可以让我们非常方便的结合 electron 和 vue,需要做一些指定的配置。 初始化electron项目 可以参考 electron ...
yarn add vue-cli-plugin-electron-builder 2、在src目录下新建 background.ts,作为electron入口 import { app, protocol, BrowserWindow, ipcMain } from 'electron' import { createProtocol } from 'vue-cli-plugin-electron-builder/lib' import path from 'path' //import installExtension, { VUEJS3_DEVTOO...
安装vite-plugin-electron:<meta name="source" content="lake">集成了Vite和Electron,比如使用它之后可以让我们方便的在渲染进程中使用Node API或者Electron API,详细使用用法可以去官网学习:vite-plugin-electron。 npm install vite-plugin-electron -D
electron-main:主进程目录。 electron-preload:预加载代码目录,主要是定义桥接通信。 其他文件:也就是 vue 初始化后的目录。 目录结构这么设计的原因是因为我们使用的 vite-plugin-electron 插件需要使用这样的目录结构,目前还没有提供设置修改。 初始化项目目录 ...
2022.8.11 如何创建Vue3+TypeScript+Electron项目 准备开发环境:VS Code、npm、node 1.安装Vue CLI (Vue脚手架) 可以使用下列任一命令安装这个新的包: npm install-g @vue/cli# ORyarnglobaladd@vue/cli 详见vue CLI 安装 2.创建Vue项目 vue create demo1 ...
electron-main:主进程目录 electron-preload:预加载代码目录,主要是定义桥接通信 其他文件:也就是 vue 初始化后的目录 目录结构这么设计的原因是因为我们使用的 vite-plugin-electron 插件需要使用这样的目录结构,目前还没有提供设置修改。 初始化项目目录
在构建 electron-vue 项目的时候其实遇到了很多的坑,为了构建这个模板大概花费了一整天(24h)的时间,其间遇到的问题数不胜数,但是为了完美地构建这个项目,还是挺过来了,而且是我在无意间发现这种构建能实现,不会出问题,后面会把遇到的重要的问题排出来,大家来对号入座一下。 问题1:使用 simulatedgreg/electron-cli ...
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入Chromium和Node.js到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。 TypeScript是微软开发的一个开源的编程语言,通过在JavaScript的基础上添加静态类型定义...