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 提供的与操作系统交互的能力，开发者可以快速构建现代化的桌面应用。通过合理使用主进程和渲...
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 复制...
2. 项目开发模式运行出现 Failed to fetch extension 警告 由于网络问题, 开发模式无法下载 vue devtool 导致的警告, 需要在 background.js 中注释掉下载代码 image.png 3. 项目使用本地的vue devtools ① 首先可以将vue devtools的代码clone下来, 然后进行编译 代码语言:javascript 复制 git clone https://github...
以便于在桌面上进行运行。 通俗来讲它就是一个软件 , 如 QQ 、网易云音乐、优酷视频 等等。功能至强大 超乎你的想象 二、开发环境的准备 1、安装 Node.js 坏境 Node.js 官网地址 点此node.js 官方地址 2、安装 Vue Cli npm install-g @vue/cli ...
开发环境的准备 1、安装 Node.js 坏境 官网地址:https://nodejs.org/zh-cn/about 2、安装 Vue Cli npm install -g @vue/cli 3、安装 淘宝镜像 cnpm npm config set registry https://registry.npmmirror.com 4、全局安装 Electron cnpm install electron -g ...
渲染进程的页面交给了vue进行渲染,开发过程和我们平时使用vue开发web页面相差无几。而electron主进程的代码是放在background.js中。 Coding 项目支持热更新,修改代码后不用再手动刷新,比之前从零DIY要方便很多,我们可以更专注于业务逻辑的开发,下面就进入coding阶段~~ ...
在开发Vue.js应用时,你需要熟悉其核心概念,如响应式数据绑定、组件、指令、过滤器、生命周期钩子等。 2. 学习Electron框架的核心概念和特性 Electron是一个使用Web技术(HTML、CSS和JavaScript)开发跨平台桌面应用程序的框架。它允许你将Node.js和Chromium嵌入到一个桌面应用中,从而可以访问底层的操作系统API,并构建出...
开发步骤 1、执行如下命令创建一个新的Vite项目: $ yarn create vite 输入项目名称:electron-client,选择框架:Vue,之后选择使用JavaScript。 2、进入项目根目录: $cdelectron-client 3、安装项目依赖: $ yarn add --dev electron concurrently cross-env electron-builder wait-on ...