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...
使用npm run dev 命令启动 Vite 开发服务器。 使用npm run electron:dev 命令启动 Electron 应用,并连接到 Vite 开发服务器。 打包应用: 使用npm run electron:build 命令打包 Electron 应用,生成可执行文件。 通过以上步骤,你可以成功搭建一个使用 Electron、Vite、Vue 3 和 TypeScript 的桌面应用项目。
在「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:...
Electron结合Vue3.2和TypeScript有哪些优势? 使用Vite搭建Electron+Vue3.2+TypeScript项目的步骤是什么? 在Electron+Vue3.2+TypeScript项目中如何进行性能优化? Electron可以让程序员重用Web的代码,使用HTML、CSS、JavaScript来构建桌面应用,并在不同平台上使用。 Electron官网上说:“比你想象的更简单”———“如果你可以...
目前常用创建 Electron + Vite + Vue3 + Typescript 项目的工具有两个: Electron Forge,该工具为Electron的官方工具 2. Electron-vite,该是一个新型构建工具,已经逐渐成为 Electron 开发生态的一部分。 经过两…
vite-plugin-electron插件是将 vite 和 electron 结合在一起的,可以让我们非常方便的结合 electron 和 vue,需要做一些指定的配置。 初始化electron项目 新建目录文件electron-main/index.ts主进程目录和文件、electron-preload/index.ts预加载目录和文件 // electron-main/index.ts ...
使用TypeScript 和 Vue 3 搭建一个全新的 HelloWorld Electron 程序 引言 Electron 是一个开源框架,使开发者能够使用 Web 技术(如 JavaScript, HTML 和 CSS)构建跨平台桌面应用程序。在本教程中,我们将使用 TypeScript 和 Vue 3 搭建一个简单的 HelloWorld Electron 程序。
作者:周文武,Electron+Vue3+Vite搭建一个桌面应用:现实问题得益于Vite卓越的前端开发体验,越来越多的Electron项目也开始应用它来构建开发。翻阅各种社区资源可以发现很多基于Vite搭建的Electron开发模板,但都存在着一些共同的问题:配置相
( 环境变量 NODE_ENV=development、TEST=vtu ) * node build/dev-runner.js * * 脚本执行操作 - 编译 Tests ( 利用既有 vite 配置,无缝支持解析 .vue 文件以及编译 TypeScript ) * tests/vtu/*.spec.ts ---> Vite.build() ---> tests/vtu/build * * 脚本执行操作 - 启动 Jest 运行测试用例 ( ...
同时在script目录下创建相应的文件,接着我们就开始撰写者两个文件的代码了 调试脚本 通过Vite启动Web项目 调试脚本首先要做的工作就是启动Vue项目 让它跑在http://localhost下,这样我们修改渲染进程的代码时, 会通过Vite的热更新机制实时反馈到界面上 Vite除了提供cli的指令启动项目外,也提供了API,我这里就是直接调...