用电子真空支架改造真空工程的方法

1.什么是电子

Electron允许您使用纯JavaScript调用丰富的本机API来创建桌面应用程序。您可以将其视为io.js的变体，它专注于桌面应用程序，而不是web服务器。

这并不意味着电子是图形用户界面库的JavaScript版本。相反，Electron使用网页作为其GUI，因此您可以将其视为由JavaScript控制的Chromium浏览器的简化版本。

从发展的角度来看，电子应用本质上是一个节点。js应用程序。应用启动的入口和Node.js模块是同一个package.json文件。

项目名称：电子

项目官方网站：https://electronjs.org/docs

2.电子核心

电子核心可以分为两部分，主流程和渲染流程。主进程连接操作系统和渲染进程，可以看作是页面和计算机之间的桥梁。渲染过程是熟悉的前端环境。只是载体变了，从浏览器到窗口。在传统的网络环境中，我们无法操作用户的系统。电子相当于节点环境，我们可以在项目中使用所有的节点api。

简单的理解就是：用节点环境壳化一个web项目。

3.什么是电子真空

本案使用的是electronic-Vue脚手架，在原项目中使用vue-cli脚手架搭建开发环境。在编码之前，我们搜索github，发现一位大神写了一个基于vue和electron的支架，就是Electron-vue。

电子vue项目名称

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

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

4.电子真空改造项目

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

转换后(项目由命令vue init模拟Greg/electron-vue my-project创建，当vue项目由该命令初始化时，所有参数与vue-cli初始化的参数相同)

调整步骤

将原始项目的src目录中的文件复制到当前项目的src/渲染器目录中。调整后，npm运行开发开始，它是红色的

存在的问题

1.原始项目中引用的工具包，如element-ui手写笔-loader手写笔，需要安装到新项目中

2.在原始项目的build/webpack.base.conf.js中配置的参数被相应地修改为。新项目中的e-vue/web pack . renderer . config . js

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

。e-vue/web pack . renderer . config . js调整如下：

3.在原项目中使用了手写笔预编译，在electronic-vue初始化的项目中无法编译手写笔，需要在中进行相应的配置。electronic-Vue/Webpack。renderer.config.js使手写笔在新项目中正常编译(如果使用了less和sass等其他css预编译语言，则应设置相应的配置项)

4.款式不对。电子是基于WebKit内核的。对于像flex、box-size和filter这样的属性，应该添加-webkit前缀。

5.可能的误解

当初收到把网页打包成桌面应用的需求时，因为所有的项目都是用vue写的，惯性固化的思想让我认为只有vue项目才能通过e-vue构建的方式构建成桌面应用(先安装e-Vue脚手架，然后复制原来的Vue项目)。事实是，它与使用什么样的前端框架将项目打包到桌面应用程序无关。任何项目都可以通过electronic打包成桌面应用(注意不是electronic-vue，它是一个脚手架工具，可以将Vue项目快速打包成桌面程序，集成Vue脚手架和electronic的产品)

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。