Electron-vue脚手架改造vue项目的方法


Posted in Javascript onOctober 22, 2018

1. 什么是Electron

Electron可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的,io.js 的一个变体。

这不意味着 Electron 是某个图形用户界面(GUI)库的 JavaScript 版本。 相反,Electron 使用 web 页面作为它的 GUI,所以你能把它看作成一个被 JavaScript 控制的,精简版的 Chromium 浏览器。

从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。应用启动的入口是一个与 Node.js 模块相同的 package.json文件。

项目名称:Electron

项目官网:https://electronjs.org/docs

2. Electron核心

electron核心我们可以分成2个部分,主进程和渲染进程。主进程连接着操作系统和渲染进程,可以把她看做页面和计算机沟通的桥梁。渲染进程就是我们所熟悉的前端环境了。只是载体改变了,从浏览器变成了window。传统的web环境我们是不能对用户的系统就行操作的。而electron相当于node环境,我们可以在项目里使用所有的node api 。

简单理解就是:给web项目套上一个node环境的壳。

3. 什么是Electron-vue

本案例中用到的是Electron-vue脚手架,原项目采用了vue-cli脚手架搭建开发环境,在开始编码之前,在github上搜了一下,发现有大神写了一个基于Vue和Electron的脚手架就是Electron-vue啦

项目名称:electron-vue

项目地址:https://github.com/SimulatedGREG/electron-vue

项目文档:https://simulatedgreg.gitbooks.io/electron-vue/content/en/

4. Electron-vue改造vue项目

调整前(通过命令vue init webpack my-project 创建项目)

Electron-vue脚手架改造vue项目的方法

改造后(通过命令vue init simulatedgreg/electron-vue my-project 创建项目,在用该命令初始化vue项目时,各个参数跟vue-cli初始化项目是一样样的)

Electron-vue脚手架改造vue项目的方法

调整步骤

将 原项目的src目录下的文件 拷贝到 当前项目src/renderer目录 下。调整好之后npm run dev启动,一片红啊

存在问题

1.   原项目中引用的工具包,如element-ui  stylus-loader  stylus在新项目中需安装一下

2.   原项目中在build/webpack.base.conf.js中配置的参数对应的修改到新项目的.electron-vue/webpack.renderer.config.js中

build/webpack.base.conf.js文件如下:

Electron-vue脚手架改造vue项目的方法

.electron-vue/webpack.renderer.config.js调整如下:

Electron-vue脚手架改造vue项目的方法

3.   原项目中用到了stylus预编译,Electron-vue初始化的项目无法编译stylus,需要在.electron-vue/webpack.renderer.config.js 中做相应配置,让新项目能正常编译stylus,(如果用到了less、sass等其他css预编译语言,需设置对应的配置项)

Electron-vue脚手架改造vue项目的方法

4. 样式出错,Electron是基于WebKit内核的,对于flex、box-sizing、filter等属性需加上-webkit前缀

5. 可能存在的误区

一开始接到要将web页面包装成桌面应用的需求时,因为项目都是用的vue编写,惯性固化的思维让我认为只有vue项目通过Electron-vue的构建方式,(先安装Electron-vue脚手架,再把原先的Vue项目拷贝过来)才能构建成桌面应用。事实是,将项目打包成桌面应用跟使用什么前端框架没有关系,通过Electron任何项目都能打包成桌面应用(注意不是Electron-vue,Electron-vue是能快速将Vue项目打包成桌面程序的脚手架工具,整合了Vue脚手架和Electron的产物)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 无符号右移赋值操作
Apr 17 Javascript
读jQuery之十 事件模块概述
Jun 27 Javascript
通过location.replace禁止浏览器后退防止重复提交
Sep 04 Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 Javascript
分享Javascript实用方法二
Dec 13 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
React中上传图片到七牛的示例代码
Oct 10 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 #Javascript
vue 配置多页面应用的示例代码
Oct 22 #Javascript
微信小程序引用iconfont图标的方法
Oct 22 #Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 #Javascript
js异步上传多张图片插件的使用方法
Oct 22 #Javascript
js实现动态添加上传文件页面
Oct 22 #Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 #Javascript
You might like
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
php学习之数据类型之间的转换介绍
2011/06/09 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python日期操作学习笔记
2008/10/07 Python
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
python机器学习之神经网络实现
2018/10/13 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
电子信息工程专业自荐书
2014/06/24 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
孩子满月酒答谢词
2015/09/30 职场文书