Electron vue的使用教程图文详解


Posted in Javascript onJuly 05, 2019

下面详细给大家介绍Electron+vue的使用,具体内容如下所示:

.现如今前端框架数不胜数,尤其是angular、vue吸引一大批前端开发者,在这个高新技术快速崛起的时代,自然少不了各种框架的结合使用。接下来是介绍electron+vue的结合使用。

2.Electron是什么??

对于我来说Electron相当于一个浏览器的外壳,可以把网页程序嵌入到壳里面,可以运行在桌面上的一个程序,可以把网页打包成一个在桌面运行的程序,通俗来说就是软件,比如像QQ、优酷、网易音乐等等。功能的强大超出你的想象,可以构建跨平台桌面程序,本身支持node.js,可以使用node.js的一些模块。想要深入了解可以查看官网的详细介绍。

Electron官网:https://electronjs.org/

3.Electron+vue的联合使用

有vue基础跟nodejs基础的开发人员使用electron那就更顺风顺水了,没有node基础的,有vue或者angular基础的也可以学习,学起来可能会吃力些,不过也没关系,很多东西有大神已经封装好了,直接使用就行。

接下来教你手把手搭建一个electron+vue的开发环境。

第一步:安装nodejs

windows下的NodeJS安装是比较方便的(v0.6.0版本之后,支持windows native),只需要登陆官网(http://nodejs.org/),便可以看到下载页面。

Electron vue的使用教程图文详解

2、下载完成后双击运行进行安装,安装过程基本直接“NEXT”就可以了(全部采用默认方式安装)。(windows的安装msi文件在过程中会直接添加path的系统变量,变量值是你的安装路径,例如“C:\Program Files\nodejs”)。

3、安装完成后可以使用cmd(win+r然后输入cmd进入 )测试下是否安装成功。方法:在cmd下输入node -v,出现下图版本提示就是完成了NodeJS的安装。

Electron vue的使用教程图文详解Electron vue的使用教程图文详解

4、npm的安装。由于新版的NodeJS已经集成了npm,所以之前npm也一并安装好了。同样可以使用cmd命令行输入”npm -v”来测试是否成功安装。如下图,出现版本提示便OK了。

Electron vue的使用教程图文详解Electron vue的使用教程图文详解

5、常规NodeJS的搭建到现在为止已经完成了,急不及待的话你可以在”cmd“输入”node“进入node开发模式下,输入你的NodeJS第一句:”hello world“ - 输入:console.log(‘hello world')。

Electron vue的使用教程图文详解

第二步:搭建vue开发环境

1.安装淘宝npm镜像

由于在国内使用npm是非常慢的,所以在这里我们推荐使用淘宝npm镜像,使用

淘宝的cnpm命令管理工具可以代替默认的npm管理工具:$ npm install-g cnpm--registry=https://registry.npm.taobao.org;

淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:cnpm install--globalvue-cli 回车;验证是否安装成功,在命令输入vue,出来vue的信息,及说明安装成功;

Electron vue的使用教程图文详解

第三步:搭建vue项目

使用命令创建项目,一步步选择之后开始等等项目创建完成

Electron vue的使用教程图文详解

完成后如下:

Electron vue的使用教程图文详解

成功之后修改启动项,打开demo>config>index.js,具体修改如下:

Electron vue的使用教程图文详解

执行命令,出现如下效果说明项目已经运行成功:

Electron vue的使用教程图文详解

执行生成命令:

$ npm run build

注意: 生成的时候一定要修改index.js 中的生成路径,否则后面程序运行打包页面会显示空白,找不到路径

Electron vue的使用教程图文详解

出现如下效果

Electron vue的使用教程图文详解

项目下回多出一个dist的文件夹,里面就你打包好的东西

Electron vue的使用教程图文详解

接下来一切操作都在dist文件夹目录下。

第四步:安装Electron

执行命令:

 安装成功后执行:electron -v 查看一下是否安装成功

Electron vue的使用教程图文详解

第五步:创建主程序的入口(main.js),及相关配置 package.json

在dist文件夹内创建main.js文件及package.json 文件

文件内容如下:

main.js

 以上是最基本的代码,更复杂的可以自行设计,也可以看官方文档

package.json

 package.json更多配置可查看官方文档:https://www.electron.build/configuration/configuration

现在万事俱备只欠东风,

执行命令: electron .

Electron vue的使用教程图文详解

成功后效果如下:

Electron vue的使用教程图文详解

出现如上效果说明你已经成功了。

第五步:打包成软件包

执行命令

$ npm install electron-builder$ npm install electron-package

Electron vue的使用教程图文详解

执行打包命令:

electron-bulider

Electron vue的使用教程图文详解

Electron vue的使用教程图文详解

以上就是打包成功的效果,demo-1.0.4.exe 就是一个软件包,可以直接安装到系统上,不同的操作系统可以打包成不同的安装包。

vue有一个集成的electron的项目

electron-vue ,

现成项目已经发布到githup上

githup地址:https://github.com/2577662935/electron-vue.git

文档访问地址:https://github.com/2577662935/electron-vue/tree/master/my-project

如果调试一个程序让你很苦恼,千万不要放弃,成功永远在拐角之后,除非你走到拐角,否则你永远不知道你离他多远,所以,请记住,坚持不懈,直到成功。

ps:下面给大家介绍下electron-vue多显示屏下将新窗口投放至其他屏幕 ,具体内容如下所示:

display对象可以获取所有显示屏

此处演示程序启动是投放新窗口至另一屏幕

import { app, BrowserWindow } from 'electron'
const electron = require('electron') //获取electron对象
let newWindow
function createWindow () {
/**

 *主窗口省略

 */

let displays = electron.screen.getAllDisplays()

let externalDisplay = displays.find((display) => {
 
return display.bounds.x !== 0 || display.bounds.y !== 0

})

if (externalDisplay) {
 
newWindow = new BrowserWindow({
  
fullscreen:false,
  
 x: externalDisplay.bounds.x + 500,
  
y: externalDisplay.bounds.y + 50,
  
width: 1000,
  
height: 800
 
})
 
newWindow.loadURL(newURL)

}

newWindow.on('closed', () => {
 
newWindow = null

})
}
app.on('ready', createWindow)

总结

以上所述是小编给大家介绍的Electron vue的使用教程 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
类似框架的js代码
Nov 09 Javascript
类似GMAIL的Ajax信息反馈显示
Feb 16 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 Javascript
JavaScript String 对象常用方法详解
May 13 Javascript
基于JavaScript实现的插入排序算法分析
Apr 14 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 #Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 #Javascript
JS Math对象与Math方法实例小结
Jul 05 #Javascript
js字符串类型String常用操作实例总结
Jul 05 #Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 #Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 #Javascript
JS开发常用工具函数(小结)
Jul 04 #Javascript
You might like
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
discuz7 phpMysql操作类
2009/06/21 PHP
PHP原理之异常机制深入分析
2010/08/08 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
Python中正则表达式详解
2017/05/17 Python
Python绘制七段数码管实例代码
2017/12/20 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
中英文求职信范文
2014/01/27 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
小学生期末评语大全
2014/04/21 职场文书
员工工作表现自我评价
2015/03/06 职场文书
大学体育课感想
2015/08/10 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
一篇文章带你复习java知识点
2021/06/28 Java/Android