cd vue-electron-notes进入项目跑一遍yarn serve,这个时候没什么问题就已经成功运行起来了! 2.2 在项目内集成Electron 进入我们项目的根目录,我们执行以下命令来安装插件vue-cli-plugin-electron-builder 代码语言:javascript 复制 vue add vue-cli-plugin-electron-builder 我们选择版本^6.0.0: 代码语言:javascript 复制...
Electron + Vue跨平台桌面应用开发实战教程(三) 需求分析 我们从截图里可以看到,右侧区域主要是由标题栏和内容编辑区组成,其中标题栏的右侧还包含了一排操作按钮,在这里我们就先把这一排按钮忽略了,先把主要功能开发完毕再考虑迭代优化。 所以我们的最终需要实现的需求其实很简单,就是「标题栏 + Markdown编辑区 = ...
1.首先使用 vue create demoproject命令创建项目 2.在项目中使用命令 vue add electron-builder 这一部命令我是在vscode里面执行的,vscode使用的powershell对这个命令有限制,需要 执行set-ExecutionPolicy Unrestricted来允许。这一步,可能比较慢,建议更改npm源为国内镜像 3.执行npm install 三.使用vue来开发页面 1.确...
进程间的基本使用参见上面的教程【进程间通信】,这里需要介绍的是在electron-vite-vue项目中进程间的通信写法 electron-vite-vue项目packages的目录结构如下(即源码的目录结构) ├── packages | ├── main 主进程源码 | | └── index.ts | | └── vite.config.ts | ├── preload 预加载脚本源码 ...
简介: ruoyi-vue | electron打包教程(超详细) 公司项目由于来不及单独做客户端了,所以想到用electron直接将前端打包程exe,dmg等格式的安装包。 由于使用的ruoyi-vue框架开发,所以这篇教程以ruoyi-vue为基础的。 环境说明 nodejs:v16.18.1 npm:8.19.2 ruoyi-vue:3.8.6 环境部署 下载若依并安装依赖 ruoyi-vue...
Electron是一个基于Chromium和 Node.js,可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架,兼容 Mac、Windows 和 Linux。 在开始搭建项目之前,需要安装以下工具 node.js 1 创建项目 1.1 安装vue-cli 先查看是否已经安装了vue-cli,vue-cli的版本是什么 ...
vue3+electron开发桌面软件入门与实战(0)——创建electron应用 中二少年学编程:vue3+electron开发桌面软件入门与实战(1)——创建electron+vue3主体项目 中二少年学编程:vue3+electron开发桌面软件入门与实战(2)——创建electron+vue3框架打包集成 > 严格按照本教程学习与搭建项目,最终一定会得到一个完整的项目。并且...
一、Electron-vue简介 二、安装yarn 三、创建Electron-vue项目 1. 关于 electron-builder 2. 安装脚手架 3. 运行 4. 打包应用程序 四、background.js说明 1. 引入模块和依赖: 2. 注册协议: 3. 创建窗口函数: 4. 生命周期事件和监听器: 五、使用UI库 Vuetify ...
electron Vue 方法/步骤 1 部署electron开发环境。在github上下载最新版的elecctron开发包，目录结构如下图，electron的业务代码写在resources文件夹下的app文件夹内。2 初始化app文件夹。①在app根目录下执行“npm install”指令，安装开发依赖。②新建package.json和main.js，并在package.json中指定入口为main.js。3...