需求：最近项目，需要把后台系统集合为桌面端的应用。

示例：完成打包并安装后会在桌面呈现为这样的形式，当然图标可以自定义以及自定义安装路径，详情参照官网（反正我看不懂），开个玩笑，看我github库有描述分享在文章末尾。

写作目的：因为在了解过程中还是经历了一些曲折，所以在此分享一下经验和成果希望对大家有些帮助。

问：1.那要实现，用前端的技术栈来完成该需求，需要如何做呢？

答：我使用了一款叫electron适用于混合开发的框架。

问：2.electron是什么呢？

答：electron是什么？在该连接文章中对electron有详细描述可参考，我结合个人理解对其进行阐述：

Electron 是一个跨平台的、基于 Web 前端技术的桌面 GUI 应用程序开发框架，可以通过html-js-css的形式以及结合vue、react、来实现桌面端应用地编写使用 Node.js 来通信、处理音频视频等，几乎所有的 Web 前端技术和框架（jQuery、Vue、React、Angular 等）都可以应用。由于内置了Chromium 浏览器，所以您甚至可以不用考虑兼容性问题。

这里提及一下开源框架的开发者：赵成有兴趣的可以了解一下。

我主要分享的是electron-builder的基础使用（打包工具，将你开发的项目打包为桌面端应用）和electron基本使用，以及vue+electron-builder结合开发

说说vue+electron-builder结合开发（穿插electron知识）

说在前面，你需要了解：electron有两个进程通俗具体来说渲染进程控制页面，相对浏览器来讲，渲染进程就是各个网页，也就是应用内容。主进程控制应用窗口，也就是下图部分。

接下来开始搭建工程文件：

1.下载vue-cli

2.按你的需要初始化你的项目！！！特别注意如果使用vue-router请选择哈希模式！！！这是electron-builder的限制，此后的操作会提及。

3.使用vue add electron-builder 指令将electron-builder下载，这里需要注意的是如果有electron下载失败的情况，请不要单独npm install electron ，因为如果版本不一致也会造成打包失败，宁愿重新初始化项目并下载。

vue add electron-builder 指令安装成功后会有黄色提示：vue-router只能选择哈希模式的限制。

4.至此你的项目package.json中会多出两个命令如下

src目录下会多出一个名为background.js的electron主进程文件如下。

npm i electron：serve为运行文件，等待一段时间成功后会弹出应用窗口。

npm i electron：build为打包文件，会在文件dist目录下生成'projectName.exe'安装文件

background.js文件则为electron的两个进程中的其中之一：主进程文件，就是控制引用窗口的文件。

npm i electron后到这一步我们就具有桌面端应用的雏形了。效果如下（内容忽略，我写的demo文章末尾处会分享地址）。

但是，这里要说一句但是，请注意窗口处

是不是丑到爆炸了，我反正第一反应，我要自定义我的窗口。如何做呢？

实现步骤：主进程中去除默认窗口，渲染进程去自定义它（掌握一些默认窗口的配置和入口，主进程和渲染进程通信手段）

这里就体现了background.js文件的作用了

那我们浅浅看一下里面都是些啥

这两张图都干了些什么呢？？是不是从electron引入了一些模块，来我们挑重点

第一张图：

BrowserWindow：你的窗口模块。

ipcMain：主进程和渲染进程通信模块。

dialog：系统的弹窗模块。狗都不用，丑，忽略它。

VUEJS_DEVTOOLS：页面调试工具

第二张图：

一个叫createWindows函数，顾名思义创造了一个windows进程，里面做了一些操作。

实例化了一个BowserWindow,用win这个常量接收，

依稀可见width：1000，height：800.。

结合引用的模块，和我描述的。

此时屏幕前一个帅仔心想：老子大胆一猜！哦~这玩意儿就是关于窗口的设置。设置了宽和高，浅浅拿尺子一量，嘿！真是1000px的宽和800px的高！

表示找到突破口，窗口有救了！！！！！

上一些关键配置：

frame：false, 关闭默认窗口

resizable：false，是否可以自定义伸缩窗口大小

好将它们设置成功，页面什么样子呢浅看一下

哦豁！糟了。窗口没了拖不动了，咋整啊？

此时屏幕前的帅仔说：老子先去把默认样式消了在app.vue文件中自定义一个窗口头部组件，再用css的样式

-webkit-app-region: drag; 元素可拖动写在最外层结构

-webkit-app-region: no-drag; 元素不可拖动写在操作按钮的结构

诶嘿！成功！，帅气如你。

浅看一下效果（老规矩，忽略我的，专注功能实现）

我改动的不多可能看不出区别那我们看一下文件目录

是的，至此实现了在渲染进程定义了窗口，关于右边调试器，打包后不会出现，生产环境可以关闭。

再看看background.js文件的其他，然后我们继续实现最大窗口、默认窗口和最小窗口，退出应用。

这一块是在做打开应用时加载我们的index.html文件，也就是我们的工程文件，也就是加载渲染进程

接下来是不是都是一些事件处理的回调函数啊？就是当什么事件时，做什么事。那做了哪些事呢？这样理解，

当窗口全部退出时销毁系统任务：及调用app身上的quite()方法。

当应用出现时。实例化BrowserWindow模块以及其中约定的窗口规则 。

当应用准备好时，我们尝试打开调试器。好，了解至此就行，该处深究无益。

但是！但是！我要提及一点，我们在实例化窗口时应该要有一个概念——即，我们是可以创造多个进程的通俗就是多个窗口及规则。具体请上b站，搜vue+electron了解。这里不做过多赘述（如果要写大型项目还是值得一看类似应用为桌面端企鹅登录的界面再转变为登录后的界面）。

接下来实现窗口最大窗口、默认窗口和最小窗口，退出应用。

说到这儿，靓仔纳闷了。我怎么实现呢，按理说主进程才能操作应用啊，我在渲染进程怎么搞？

突然想到！我在background.js主进程文件上面引入了个

ipcMain：主进程和渲染进程通信模块。

对了就是它。我们要操作当前进程窗口时，肯定要跟它约定好，当我干啥，你做啥操作，所以createWindows（）便成了这样。ipcMain在什么时候做什么操作。

不得了，此刻一位精通vue的靓仔惊呼！李奶奶的收音机！这不那全局事件总线吗！

像，太像了。

事情渐渐变得简单。

欸！不对，报错了。我直接问vue.config.js几个意思。

它说你得这么着

okjiejue

那我怎么触发这些约定呢？渲染进程有话说

ipcRenderer:用于渲染进程触发ipcMain事件函数

ipcMain：主进程和渲染进程通信模块。

它俩私下玩的好有啥心里话只给对方说，像极了你老板的秘书和你老板。

代码如下

我这里自定义了一个dialog，系统级的太丑。

最终效果

至此基础部分完成。

项目内有自定义图标、自定义安装地址等注意事项

分享一下demo项目地址：https://github.com/aobendong/electron-innit.git

vue2+electron 给大家说个相声相关推荐

新星计划 Electron+vue2 桌面应用 2 搭建及运行
基础内容:新星计划 Electron+vue2 桌面应用 1 基础_lsswear的博客-CSDN博客根据使用过的经验和官网的描述,大概可以有四种方式: 自己创建项目(仅使用npm) 用Electr ...
vue2.0 项目搭建和vue 2.0 electron 项目搭建
1.关于electron vue 项目的搭建全局或者局部安装项目vue:脚手架指令生成: npm install -g vue-cli vue init simulatedgreg/electron ...
Vue 全家桶 + Electron 开发的一个跨三端的应用
GitHub Repo:vue-objccn Follow: halfrost · GitHub 项目地址:https://github.com/halfrost/vue-objccn 利用 Vue. ...
Vue 全家桶 + Electron 开发的一个跨三端的应用 1
代码地址如下: http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...
vue2.0桌面端框架_Vue PC端框架
Vue PC端框架 472019.02.22 10:30:20字数 1,749阅读 54,067 1. Element Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面 ...
vue2练习五个小例子笔记
https://segmentfault.com/a/1190000008436978 主题 Vue.js vue2练习五个小例子笔记多练习,多撸代码,多进步. 基于vue2 1.双向数据绑定 &l ...
vue+electron 跨平台桌面应用开发实战教程
一.创建项目 1.1 安装vue-cli 先查看是否已经安装了vue-cli,vue-cli的版本是什么? 查看版本命令:vue --version 如果版本叫老,可以直接卸载,再安装最新版本卸载命 ...
Electron教程（四）使用 Vue Browser 版，创建小工具应用
Electron教程(四)使用 Vue Browser 版,创建小工具应用 Electron教程(一)什么是 Electron,由来.适用场景和 Electron 的环境搭建 Electron教程( ...
vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建多个轻量库搭配使用请访问链接: https://ww ...

vue2+electron 给大家说个相声

说说vue+electron-builder结合开发（穿插electron知识）

接下来开始搭建工程文件：

接下来实现窗口最大窗口、默认窗口和最小窗口，退出应用。

分享一下demo项目地址：https://github.com/aobendong/electron-innit.git

vue2+electron 给大家说个相声相关推荐

最新文章

热门文章