1.首先使用 vue create demoproject命令创建项目 2.在项目中使用命令 vue add electron-builder 这一部命令我是在vscode里面执行的,vscode使用的powershell对这个命令有限制,需要 执行set-ExecutionPolicy Unrestricted来允许。这一步,可能比较慢,建议更改npm源为国内镜像 3.执行npm install 三.使用vue来开发页面 1.确...
结合 Vue 和 Electron 开发桌面端应用程序是一个非常强大的解决方案，尤其是对于已经熟悉 Web 开发的前端工程师来说，利用现有的 Web 技术栈即可构建跨平台的桌面应用程序。通过 Vue 的组件化、双向绑定等特性，以及 Electron 提供的与操作系统交互的能力，开发者可以快速构建现代化的桌面应用。通过合理使用主进程和渲...
✔ Successfully installed plugin:vue-cli-plugin-electron-builder?Choose ElectronVersion(Use arrow keys)^4.0.0^5.0.0❯^6.0.0 这里静静等待安装即可,它会下载electron的依赖文件 60M 左右,过程可能有点长,跟你的网络息息相关…… 在这等待安装的过程中,其实我们还可以再唠嗑唠嗑另一种页面可视化安装vue-cl...
1、根据提示下载与当前elecron本版一致的 win32-x64 然后放到 参考路径 : C:\Users\Admin/AppData\Local\electron\Cache https://github.com/electron/electron/releases/download/v13.6.9/electron-v13.6.9-win32-x64.zip 2、根据提示下载对应的 winCodeSign 解压后 放到 C:\User\Admin/AppData\Local\electr...
项目技术栈: vue版本:vue3 ui框架:element-plus 语法:TypeScript 状态管理工具:pinia 路由:vue-router 桌面应用:electron (拼课 wwit1024) -2 安装路由和路由二次封装 3-3 安装pinia和持久化存储 3-4 路径别名 3-5 配置代理和请求二次封装
Electron + Vue跨平台桌面应用开发实战教程(三) 需求分析 我们从截图里可以看到,右侧区域主要是由标题栏和内容编辑区组成,其中标题栏的右侧还包含了一排操作按钮,在这里我们就先把这一排按钮忽略了,先把主要功能开发完毕再考虑迭代优化。 所以我们的最终需要实现的需求其实很简单,就是「标题栏 + Markdown编辑区 =...
Electron:Electron 是用于构建桌面应用的框架,它允许你使用 Web 技术来构建原生应用。 安装Vue CLI 和 Electron: npm install -g @vue/cli npm install electron --save-dev 创建Vue 项目 使用Vue CLI 创建一个新的 Vue 项目: vue create vue-electron-app 然后进入项目目录: cd vue-electron-app 安装Electron...
简单的前后端分离:Vue.js 可以很容易地实现前后端分离开发,将前端代码与后端逻辑分离,而 Electron 可以将前端代码打包成一个独立的可执行文件,与后端 API 进行通信,简化了开发流程。 离线应用支持:由于 Electron 可以作为一个独立的桌面应用程序运行,因此可以轻松支持离线应用程序,使用户可以在没有网络连接的情况下继续...
一、Electron-vue简介 二、安装yarn 三、创建Electron-vue项目 1. 关于 electron-builder 2. 安装脚手架 3. 运行 4. 打包应用程序 四、background.js说明 1. 引入模块和依赖: 2. 注册协议: 3. 创建窗口函数: 4. 生命周期事件和监听器: 五、使用UI库 Vuetify ...
一、Electron介绍 Electron 是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目. 使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序 1. 特点 跨平台 可以打包成Mac、Windows 和 Linux三个平台的应用程序 简化桌面端开发 (1)Electron 基于 Chromium 和 Node.js,可以使用 HTML, CSS 和 JavaScript ...