在「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:...
5.同样,每次都要切换到electron目录下,很麻烦,所以在根目录(vue项目)的package.json中也添加一个打包vue->切换目录->打包electron的命令"build:win":"npm run build && cd electron && npm run build:win", 至此,vue项目的package.json为: {"name":"mydisk","version":"0.0.0","private":true,"scripts...
"@vue/compiler-sfc":"^3.0.0","vite":"^1.0.0-rc.9","vue":"^3.0.2","vue-router":"^4.0.0-rc.1","electron":"^11.0.2","electron-builder":"^22.9.1","electron-updater":"^4.3.5", 注意:这些依赖全部安装在devDependencies下 各个库的版本发文时应该是最新的了,不过如果有更新的版本,你...
// renderer.js// vue页面触发新增网站按钮事件const handleSubmit = async () => {const result = await window.electronAPI.sendUrl(url)//拿到主进程返回的结果,做添加处理console.log(result)} 2、预加载脚本页面 // preload.jsconst { contextBridge, ipcRenderer} = require('electron')//桥接渲染进程与...
开发步骤 1、执行如下命令创建一个新的Vite项目: $ yarn create vite 输入项目名称:electron-client,选择框架:Vue,之后选择使用JavaScript。 2、进入项目根目录: $cdelectron-client 3、安装项目依赖: $ yarn add --dev electron concurrently cross-env electron-builder wait-on ...
npm init vue # 安装依赖 npm install # 一定要安装成开发依赖 npm install electron electron-builder -D # 安装超时 请使用某宝镜像 或者XX上网 npm config set electron_mirror=https://registry.npmmirror.com/-/binary/electron/ 1. 2. 3. 4. ...
electron-vite vue3 最佳实践 快速上手 electron开发桌面端 #前端 #程序员 #electron #javascript - 李钟意讲前端于20240827发布在抖音,已经收获了8.7万个喜欢,来抖音,记录美好生活!
plugins: [vue()], }) 我们在终端中,执行npm run build命令。 就在根目录中生成了, dist 文件夹。 设置Electron 框架 有了Vue3 项目构建出来的 dist 目录之后, 设置Electron 就很简单了。 首先,我们在项目的根目录下,创建 main.js 文件。 并将, Elctron 官方文档中的, main.js 文件内容 copy 过来就可...
Electron 相关放在electron Vue + Vite 作为前端经常使用的,简单提一下 执行创建 Vue 项目指令 npm create vue@latest 创建一个包含Vue + Vite + TS + Pinia + ESLint + Prettier的项目 Vue3.4 至于标题特地指出Vue3.4版本,主要是新出的几个特性比较香,这里简单提一下 ...
随着Web技术的飞速发展,利用前端技术栈开发桌面应用已成为一种趋势。Electron、Vite和Vue3的结合,为我们提供了一个强大而灵活的解决方案,能够快速开发出美观、功能丰富的跨平台桌面应用。 一、Electron简介 Electron是一个使用Web技术(HTML, CSS, 和JavaScript)来创建跨平台桌面应用程序的框架。它结合了Chromium和Node....