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

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 创建项目）

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

调整步骤

将 原项目的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/webpack.renderer.config.js调整如下：

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

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的产物）

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

赞 (0)

相关推荐

  • 详解vue-cli官方脚手架配置

    详解vue-cli官方脚手架配置

    一,准备工作 1.下载node.js 和 npm 2.将镜像源替换为淘宝镜像 二,创建项目 1.vue环境搭建 创建目录resume 1)npm init -y 2)npm install vue-cli -g (安装vue-cli ) 3)vue init webpack --dirname(为空时默认当前目录) 输入命令后,会询问我们几个简单的选项,我们根据自己的需要进行填写就可以了. Project name :项目名称 ,如果不需要更改直接回车就可以了.注意:这里不能使用大写,所以我把名

  • 脚手架vue-cli工程webpack的作用和特点

    Vue项目开发过程中,会因为很多不同的实际运用需求不断地对webpack配置进行修改,在此之前,我们需要对webpack有一个基本的认识,了解它到底能为我们做些什么 webpack是一个模块打包的工具,它的作用是把互相依赖的模块处理成静态资源,如下图所示.. webpack的作用: ●把依赖树按需分割: ●把初始加载时间控制在较低的水平: ●每个静态资源都应该成为一个模块: ●能把第三方库集成到项目里成为一个模块: ●能定制模块打包器的每个部分: ●能适用于大型项目. webpack的特点: ●

  • vue-cli 脚手架基于Nightwatch的端到端测试环境的过程

    vue-cli 脚手架基于Nightwatch的端到端测试环境的过程

    不同公司和组织之间的测试效率迥异.在这个富交互和响应式处理随处可见的时代,很多组织都使用敏捷的方式来开发应用,因此测试自动化也成为软件项目的必备部分.测试自动化意味着使用软件工具来反复运行项目中的测试,并为回归测试提供反馈. 端到端测试又简称E2E(End-To-End test)测试,它不同于单元测试侧重于检验函数的输出结果,端到端测试将尽可能从用户的视角,对真实系统的访问行为进行仿真.对于Web应用来说,这意味着需要打开浏览器.加载页面.运行JavaScript,以及进行与DOM交互等操作.

  • 解决vue脚手架项目打包后路由视图不显示的问题

    脚手架vue-cli 搭建的项目,build后放于服务器上,发现其他资源全部变成静态加载成功,但路由视图为空,最初以为是webpack打包的问题,找了好久发现是路由配置问题. 解决办法如下: Vue.use(VueRouter) const router = new VueRouter({ mode: 'history', base: '/system/', //添加根目录 scrollBehavior: () => ({ y: 0 }), routes }) 比如我是将打包后的dist和ind

  • 开发一个Parcel-vue脚手架工具(详细步骤)

    前言 像我们熟悉的 vue-cli,create-react-app 等脚手架,只需要输入简单的命令 vue init webpack project,即可快速帮我们生成一个初始项目.在实际工作中,我们可以定制一个属于自己的脚手架,来提高自己的工作效率. 为什么需要需要脚手架? 减少重复性的工作,不再需要复制其他项目再删除无关代码,或者从零创建一个项目和文件. 根据交互动态生成项目结构和配置文件等. 多人协作更为方便,不需要把文件传来传去. 思路 要开发脚手架,首先要理清思路,脚手架是如何工作的

  • vue脚手架搭建项目的兼容性配置详解

    使用vue-cli搭建项目,面临着解决ie兼容性问题(ie9+),因为ie浏览器并不支持es6语法等. 首先安装babel-polyfill,解决ie不支持promise对象的问题 npm install --save-dev babel-polyfill 安装成功之后,在main.js第一行引入 import 'babel-polyfill' 安装引入成功之后,如果项目还不能正常运行 则需要安装babel进行解析 (推荐阮一峰老师的文章https://www.jb51.net/article/

  • 详解vue组件开发脚手架

    generator-vue-component可以快速生成自己的组件开发的脚手架,类似于vue-cli生成vue项目,这脚手架是目录结构是方便组件开发和调试 由于脚手架是由yeoman搭建,所以必须全局安装yeoman npm install yo 然后全局安装generator-vue-component npm install generator-vue-component -g 到项目目录,获取对应的开发模板 yo vue-component-developer 运行上面命令会弹出下面,依

  • Vue脚手架的简单使用实例

    提前申明 注意:自己对vue脚手架的理解和认识,很多东西和理解都是形象上的手法,并不专业和官方 webpack 一种项目构建工具,可以将css和js压缩成一个文件.此外,可以提供测试用服务器.使用webpack时,可以配置一些默认扩展名 和 路径别名 来在项目文件里直接使用 导入和导出 使用export命令可以将一个JS对象导出,其他JS文件可以使用import 对象名 from 路径的形式导入这个对象来使用,但是在导入时,必须知道导入导出对象的名字.如果使用export default命令导出

  • vue-cli脚手架的安装教程图解

    vue-cli脚手架的安装教程图解

    vue-cli脚手架模板是基于node下的npm来完成安装,下面给大家介绍vue-cli脚手架的安装,具体内容如下所述: https://github.com/vuejs/vue-cli  官网 使用官方推荐的webpack 条件: node在4.以上,npm在3以上,查看版本号打开cmd输入,node -v npm -v; 安装步骤: 1.cmd打开命令行窗口 2.输入npm install vue-cli -g,然后回车等待 3.安装结束后输入vue 查看是否安装成功 4.运行vueinit

  • vue-cli脚手架搭建的项目去除eslint验证的方法

    eslint验证,为我们提升我们的代码质量和良好的编码风格带来了非常大的帮助,但是由于其语法验证的严格,很多程序员在初期使用的时候很不适应,就想怎么能够去掉eslint验证. 其实把eslint验证去除的方法并不复杂,因为我们的脚手架是基于webpack的,那么一般的配置操作都会在webpack工具的配置文件中进行配置,那么我们就直接找webpack的配置文件就可以了.可能我们的很多刚开始接触vue-cli脚手架工具的朋友可能会说我搭建完项目后,build目录下有3个webpack开头的配置文件

随机推荐