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在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
如何在Vue中抽离接口配置文件
Oct 31 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
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实现的折半查找算法示例
2017/12/19 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
移动端js图片查看器
2016/11/17 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
MySQL最常见的操作语句小结
2015/05/07 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
基于python实现文件加密功能
2020/01/06 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
2014年幼儿园后勤工作总结
2014/11/10 职场文书
宇宙与人观后感
2015/06/05 职场文书
安全守法证明
2015/06/23 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
总结几个非常实用的Python库
2021/06/26 Python