第一步,执行下面的操作创建vite项目: 1 npm create vite 创建项目时,我们可以选择不同的模板来创建不同的项目。这里我们选择 Vue,之后再选择TypeScript,这样我们就创建了一个使用TypeScript作为开发语言的Vue项目,而其打包和测试工具使用的是Vite。 如果你的系统中没有npm命令,则需要先安装nodejs,关于nodejs的安装...
1. 安装 vite npm create vite 2. 创建项目 输入具体的vite项目名字,这里是vite-project Project name: ... vite-project Select a framework: » vue Select a variant: » vue-ts 3. 进入且运行 进入项目,在运行前需要先安装下依赖。 npm install npm run dev 4. 安装electron npm add --dev elect...
ExectronVueVite_1.0.0.exe 文件是安装包,打开会显示安装过程,执行完安装过程后在系统的控制面板中的软件列表中可以看到该软件,也可以执行卸载。 打开后就是正常的软件界面 我们创建好了项目结构,那么在使用 Vue 开发 Electron 桌面应用的时候还有一个比较重要的知识点要了解,就是消息通信。在新版本的 electron 中,...
在「vite.config.ts」中配置vite-plugin-electron插件入口 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import electron from 'vite-plugin-electron' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), electron({ // 主进程入口文件 entry:...
要将现有的Vue 3 + TypeScript + Vite项目集成到Electron中,你可以按照以下步骤进行: 1. 安装Electron及相关依赖 首先,你需要在你的Vue 3项目中安装Electron及其相关依赖。打开终端,在项目根目录下运行以下命令: bash npm install electron --save-dev 同时,你还需要安装electron-builder来简化打包过程: bash npm...
因为我们需要使用 Electron 和 vue 进行开发,因此我们把它们分开目录存储,基础目录结构如下: electron-main:主进程目录 electron-preload:预加载代码目录,主要是定义桥接通信 其他文件:也就是 vue 初始化后的目录 目录结构这么设计的原因是因为我们使用的 vite-plugin-electron 插件需要使用这样的目录结构,目前还没有提供...
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。目前 Vue 已经成为继 Rect 之后最流行的前端开发框架。 我找到了一个插件:vite-plugin-electron,可以很方便的帮我们把 electron 和 vue 结合起来,开发起来非常方便。
vite-plugin-electron插件是将 vite 和 electron 结合在一起的,可以让我们非常方便的结合 electron 和 vue,需要做一些指定的配置。 初始化electron项目 新建目录文件electron-main/index.ts主进程目录和文件、electron-preload/index.ts预加载目录和文件 // electron-main/index.ts ...
vite-plugin-electron插件是将 vite 和 electron 结合在一起的,可以让我们非常方便的结合 electron 和 vue,需要做一些指定的配置。 初始化electron项目 新建目录文件electron-main/index.ts主进程目录和文件、electron-preload/index.ts预加载目录和文件 // electron-main/index.tsimport{app,BrowserWindow}from'electron...
2、vue/vite/typescript; 创建项目 npm create vite@latest servermonitor--templatevue-ts//提示安装vite,然后依次选择 Vue、TypeScriptcd servermonitor//进入到项目路径npm install npm run dev image.png 安装Electron npm install electron-D//安装electron ...