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 相关文章推荐
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
intro.js 页面引导简单用法 分享
Aug 06 Javascript
jQuery DOM操作实例
Mar 05 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
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
PHP使用feof()函数读文件的方法
2014/11/07 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
python实现异步回调机制代码分享
2014/01/10 Python
python uuid模块使用实例
2015/04/08 Python
python 多个参数不为空校验方法
2019/02/14 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
web页面录屏实现
2019/02/12 HTML / CSS
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
接口中的方法可以是abstract的吗
2015/07/23 面试题
婚礼证婚人证婚词
2014/01/08 职场文书
家长会邀请书
2014/01/25 职场文书
摄影助理岗位职责
2014/02/07 职场文书
一行代码python实现文件共享服务器
2021/04/22 Python
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
JavaScript实现班级抽签小程序
2021/05/19 Javascript