关键词：
参考技术A 上文简单介绍了 Electron，以及如何搭建环境来进行开发。现实开发中，从头开始使用 HTML5、JS、CSS 来构建应用毕竟还是一件苦差事。鉴于 Vue 是目前国内前端开发的主流技术栈之一，本文来趟一下如何使用 Vue 开发 Electron 桌面应用这个坑，减少一些大家搭建环境中可能会碰到的问题。以下命令设置 npm 到国内的淘宝源地址。
验证一下：
如果看到输出是 https://registry.npm.taobao.org ，这表明设置成功的。
参考： npm配置国内源方法
本文将使用 yarn 作为 Node.js 的包管理器。至于 npm 与 yarn 孰优孰劣，则仁者见仁、智者见智，不便评说。
官方推荐的安装 yarn 的命令如下：
笔者在 Mac 上是使用 homebrew 安装的 yarn：
目前的最新版本是 1.22.5。
homebrew 的国内源设置请参考 清华大学Homebrew/Linuxbrew 镜像使用帮助 。
本文将通过 Vue CLI 来安装 Vue.js，其他的安装方式可以参考官方的 Vue Installation 。
可以看到，当前 Vue CLI 的最新版本是 4.5.4。
注： Windows 下面推荐使用 npm 安装，否则有一定概率 vue 命令无法识别。 安装命令如下：
使用 vue create 命令创建工程，选项保持默认（使用 vue 2）即可。
通过浏览器范围访 http://localhost:8080/ ，如果看到下图，说明工程创建成功。
Mac 系统下，如果该命令执行时间过长，可以尝试下面的命令：
执行以下命令，启动 dev server。
运行的效果：
执行以下命令，进行打包：
如果再 Mac 系统下，首次打包缓慢，也可以尝试以下命令：
Windows 系统下的加速操作（在上面设置过 electron mirror 的前提下）：
【Mac】打包后的文件如下：
【Windows】 打包后的文件如下：
示例工程可以从 github 上获取，地址是 electron-vue-demo 。
eelectron入门系列electron+vue开发桌面程序(代码片段)
...ff1a;https://xiaojujiang.blog.csdn.net/如何用vue单文件组件来开发electron程序呢？这里一共需要用到两个工具vue-cli：vue的脚手架，用于创建vue项目vue-cli-plugin-electron-builder在开始之前ÿ 查看详情
前端实战:electron+vue3+ts开发桌面端便签应用
...的一个朋友为了快速熟悉 Vue3 开发,特意使用 electron+vue3+ts 开发了一个桌面端应用,并在 github 上开源了,接下来我就带大家一起了解一下这个项目,在文章末尾我会放 github的地址,大... 查看详情
使用electron开发pc客户端----入门篇
参考技术AElectron，使用JavaScript,HTML和CSS构建跨平台的桌面应用，利用Web技术JavaScript、HTML和CSS开发跨平台（Mac，Windows和Linux系统）桌面应用的开源框架，最初是Github发布的Atom编辑器衍生出的AtomShell，后更名为Electron。可以将electro... 查看详情
electron入门01：快速入门(代码片段)
文章目录目的基础介绍开发环境准备快速入门创建应用调试应用打包应用窗口与菜单总结目的自从HTML5、CSS3、ES6这些标准加入后，前端做不管是做界面还是做功能都越来越强大、越来越方便了。通常来说前端应用只能运行在... 查看详情
electron-vue+element-ui构建桌面应用(代码片段)
最近需要用Node.js做一个桌面的应用，了解到electron可以用来做跨平台的桌面应用，而vue可以用来作为界面的解决方案，研究了一会儿如何把他们两个整合到一起使用，遇到了各种问题而放弃，毕竟作为一个非前端开发人员我的目... 查看详情
使用electron+js开发夸平台（linuxwinmac）的桌面应用程序
一、开源地址： https://github.com/electron/electron二、官方网站： https://electron.atom.io/三、案例 查看详情
使用electron将vue项目打包成exe桌面应用(代码片段)
Electron相当于一个浏览器的外壳，可以把现有的vue程序嵌入到壳里面，可以运行在桌面上的一个程序，通俗来说就是软件，比如像QQ、优酷、网易音乐等等。Electron官网：https://electronjs.org/文章目录一、vue项目中... 查看详情
将现有vue项目基于electron打包成桌面应用程序
...的，只是在"人群中多看了你一眼",便直接撸了。二、使用electron集成桌面应用 本身项目是使用vue-cli开发的，在使用electron之前，需要将本身的项目打包好后打开index.html能显示网页.因为刚接触便直接拿官方demo进行打包了. ... 查看详情
electron入门应用打包exe（windows）
最近在学习nodejs,得知Electron是通过将Chromium和Node.js合并到同一个运行时环境中，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一门技术。对于之前一直从事flashAIR桌面应用开发的我迫不及待的想“尝尝鲜”。首先，我们跟着El... 查看详情
初识electron开发桌面应用(代码片段)
Electron是什么？Electron基于Chromium和Node.js,让你可以使用HTML,CSS和JavaScript构建跨平台（mac/window/linux）桌面应用。Electron开发环境的搭建首先安装node环境（点击跳转到老张的另外一个文章，这里推荐使用nvm更好的... 查看详情
electron构建桌面应用程序开发资料整理
Electron是什么？Electron是一个程序库，基于Electron库我们可以使用HTML、CSS、JS来开发跨平台桌面应用程序（buildingcross-platformdesktopapplicationswithHTML,CSS,andJavaScript.）学习资源 Electron官网文档 https://electron.atom.io/docs/Elect 查看详情
vue项目打包成桌面程序exe除了使用electron-vue你还可以这样(代码片段)
场景electron-vue基于vue(基本上是它听起来的样子)来构造electron应用程序的样板代码。该项目的目的，是为了要避免使用vue手动建立起electron应用程序。electron-vue充分利用vue-cli作为脚手架工具，加上拥有vue-loader的webpack、electron-packag... 查看详情
electron-ui快速方便的打造炫酷的桌面应用
参考技术Aelectron-ui是基于electron和electron-vue扩展出来的一套基础的应用框架，目的是为了快速的搭建炫酷的桌面应用，其实也算不上框架只是一种解决方案而已，让electron后来的开发者在少采坑的情况下搭建出相对漂亮而快速的... 查看详情
vue3electron记录(代码片段)
vue3+electron打包成桌面应用自己记录,vue3+electron打包成.exe桌面应用,部分代码也是c来的,自己修改了一番,也算整合记录自己开发中的心得文章目录vue3+electron打包成桌面应用前言一、vuecli打包之后修改公共请求地址二、封装... 查看详情
electron和vue的关系
在electron-vue的配置中，主进程就是v8引擎，可以看成是一个浏览器；渲染进程就是网页。可以在主进程中，导入url指向的html，可以认为是一个自定义的浏览器在加载网页。（2）但是在渲染进程中的html页面中，是node环境，不再是... 查看详情
使用electron构建跨平台node.js桌面应用
...制作的小工具给做成了可视化操作的桌面软件，使用的是electron，这里简单分享一下使用electron的一些经验和心得。一、如何使用electron把基本的开发环境给跑起来？我是这么处理的，electron官方提供了一个名为“electron-quick-start... 查看详情
electron-vue的基本使用(代码片段)
Electron-Vue是个可以让我们使用Vue来开发Electron桌面程序的框架，单页面的应用解决了在Electron中每次打开新页面都要创建窗口的烦恼。1.环境搭建//安装脚手架npminstall-gvue-cli//初始化项目vueinitsimulatedgreg/electron-vuemy-project//进入... 查看详情
node桌面应用开发
1、node桌面应用开发的框架：electron 和 nw.js https://www.jianshu.com/p/c6bdb087e60d2、使用electron构建跨平台Node.js桌面应用 ： https://www.zhangxinxu.com/wordpress/2017/05/electron-node-js 查看详情