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 相关文章推荐
广告切换效果(缓动切换)
May 27 Javascript
javascript getElementsByName()的用法说明
Jul 31 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
JS实现的文字间歇循环滚动效果完整示例
Feb 13 Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 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
BBS(php & mysql)完整版(一)
2006/10/09 PHP
PHP语法速查表
2007/01/02 PHP
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
javascript中的作用域scope介绍
2010/12/28 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
JavaScript中对象属性的添加和删除示例
2014/05/12 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
vue-axios使用详解
2017/05/10 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
Python实现栈的方法
2015/05/26 Python
Python 26进制计算实现方法
2015/05/28 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
校长竞聘演讲稿
2014/05/16 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
我的长征观后感
2015/06/09 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers