目前常用创建 Electron + Vite + Vue3 + Typescript 项目的工具有两个: Electron Forge,该工具为Electron的官方工具 2. Electron-vite,该是一个新型构建工具,已经逐渐成为 Electron 开发生态的一部分。 经过两…
目标是搭建一个不带前端主流框架的electron环境,也就是没有vue和react等。包含的主要组件为: - Electron自不必说 - Electron-forge来打包(packager或者builder也都可以,一样的) - Typescript,用TypeScript有两个原因,首先当然是TypeScript好使,其次是,Electron至今都不能很好的支持ESM,因此直接写js的话,在包的引入...
3. 安装所需依赖 为了实现 electron+vue3+typescript,我们需要安装一些依赖项。其中,electron用于创建桌面应用程序,vue用于构建用户界面,typescript用于添加类型检查。 安装electron依赖: npminstallelectron --save-dev 1. 安装vue3依赖: npminstallvue@next --save-dev 1. 安装typescript依赖: npminstalltypescript ...
在Vue中调用接口 我们在 App.vue 中调用window.electronAPI.platform 接口,把系统平台信息显示在界面上。 复制 //src/App.vue<script setup lang="ts">//This starter templateisusing Vue3<script setup>SFCs//Check out https://vuejs.org/api/sfc-script-setup.html#script-setup import HelloWorldfrom'./...
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 ...
vue electron 调用python electron typescript vue 一、框架说明 vite是一种新型前端构建工具,能够显著提升前端开发体验。由尤大推出,其发动态表示“再也回不去webpack了...” Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入Chromium和Node.js到二进制的 Electron 允许您保持一个 ...
基础部分可参考这篇Electron + Vue 3.x + Vue Cli 4.x + TypeScript 构建桌面应用程序 重现步骤 把Vue Cli 升级到最新版本(编写时为Vue Cli v5.0.4) 创建生成基于Vue 3版本的项目 构建Electron 桌面应用程序,安装 Vue CLI Plugin Electron Builder ...
vite-plugin-electron插件是将 vite 和 electron 结合在一起的,可以让我们非常方便的结合 electron 和 vue,需要做一些指定的配置。 初始化electron项目 新建目录文件electron-main/index.ts主进程目录和文件、electron-preload/index.ts预加载目录和文件 // electron-main/index.tsimport{ app,BrowserWindow}from'electro...
两者最大的区别在于自由度,两者在能力上基本没什么差异了,从官方组织中的排序看,有意优先推荐 electron-forge 。4.3Web方案选型 我们采用的是 Vue3 ,同时使用 Vite 作为构建工具,具体优点,大家可以查看官网介绍,这套组合是目前主流的 Web 开发方案。4.4monorepo方案选型 ...
我找到了一个插件:vite-plugin-electron,可以很方便的帮我们把 electron 和 vue 结合起来,开发起来非常方便。 目录结构设计 因为我们需要使用 Electron 和 vue 进行开发,因此我们把它们分开目录存储,基础目录结构如下: electron-main:主进程目录 electron-preload:预加载代码目录,主要是定义桥接通信 ...