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 相关文章推荐
(function(){})()的用法与优点
Mar 11 Javascript
datagrid框架的删除添加与修改
Apr 08 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 Javascript
javascript实现简易计算器功能
Sep 23 Javascript
JS中一些高效的魔法运算符总结
May 06 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
PHP面向对象编程快速入门
2006/10/09 PHP
php递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
python杀死一个线程的方法
2015/09/06 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
Python切片操作深入详解
2018/07/27 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
研究生自我鉴定范文
2013/10/30 职场文书
英文商务邀请信
2014/01/22 职场文书
物业管理毕业生的自我评价
2014/02/17 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
如何写好竞聘报告
2019/04/03 职场文书
Pytorch可视化的几种实现方法
2021/06/10 Python