Electron vue使用详解

Electron是什么？

Electron 是一个框架，可以让您使用 JavaScript, HTML 和 CSS 创建桌面应用程序。然后这些应用程序可以打包在macOS、Windows和Linux上直接运行，或者通过Mac App Store或微软商店分发。

通常，您使用每个操作系统特定的本地应用程序框架为操作系统 (OS)创建一个桌面应用程序。 Electron 可以在使用您已经知道的技术后写入您的应用程序。

前提条件

在使用 Electron 之前，您需要安装 Node.js
安装完成node.js 后，需要检查安装是否正确，查看node.js 命令
- npm -v 查看npm版本
- node -v 查看node版本
命令响应打印Node.js 和 npm 的版本，如果两个命令都成功，就可以安装Electron了
执行：npm install electron 安装electron
安装完成后执行： electron -v 查看是否安装成功
执行：npm install electron-builder
执行：npm install electron-packager【打包】

创建基本应用程序

从开发的角度来看，Electron应用基本上是一种Node.js应用。这意味着您的 Electron 应用程序的起点将是一个 package.json 文件，就像在其他的Node.js 应用程序中一样。最小的 Electron 应用程序具有以下结构：
- electron-app
  - main.js
  - package.json
  - index.html

创建第一个vue+node.js+ electron应用步骤：

创建第一个vue+node.js+ electron应用步骤：
1. 首先创建vue工程：
  - vue init webpack xxx
  - Project name 【项目名称：不设置默认为创建时xxx】
  - Project description 【项目描述】
  - Author 【作者】
  - Vue build (Use arrow keys)
    - Runtime + Compiler: recommended for most users 【选择】
    - Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
  - Install vue-router? (Y/n) 【是否使用路由：选是】
  - Use ESLint to lint your code? 【ESlint ：代码规范】
  - 完成安装
2. 执行：npm run dev 启动vue程序
3. 证明vue项目已运行成功
4. 修改config文件夹中：index.js
  - 生成的时候一定要修改index.js 中的生成路径，否则后面程序运行打包页面会显示空白，找不到路径
  - 将build：中assetsPublicPath: './', 加点
5. 在vue项目build文件夹中创建：electron.js
  
  electron.js:
```
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')function createWindow () {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}})// and load the index.html of the app.mainWindow.loadFile('../dist/index.html')// Open the DevTools.// mainWindow.webContents.openDevTools()
}// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {createWindow()app.on('activate', function () {// On macOS it's common to re-create a window in the app when the// dock icon is clicked and there are no other windows open.if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {if (process.platform !== 'darwin') app.quit()
})// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
```
6. 注意修改：
7. 修改package.json:配置
  - 配置命令："build:electron": "npm run build && electron build/electron.js",
8. npm run build:electron：用来启动electron【原始创建项目就可以，项目添加了上传控件】启动成功
9. 在配置打包的package.json
  
  "build:exe": "electron-packager ./dist/ butel --platform=win32 --arch=x64 --icon=./src/assets/favicon.ico --overwrite"【上面配置已填加】
  
  electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
  
  sourcedir 资源路径，在本例中既是./dist/
  
  appname 打包出的exe名称
  
  platform 平台名称（windows是win32）
  
  arch 版本，本例为x64
  
  icon 为打包exe图标
10. 将build中的electron.js、package.json文件复制到dist中【dist文件：执行npm run build生成】
  - 修改electron.js
  - 修改package.json
11. 执行：npm run build:exe 打包exe命令
  
  会出现打包成功的文件夹，在里面寻找exe ，
12. 注意：exe文件不能拿出来单独使用，可以在文件夹中双击使用，也可以使用创建快捷方式使用

Electron vue使用详解相关推荐

七、Vue cli详解学习笔记——什么是Vue cli ,Vue cli的使用（安装，拉取2.x模板，初始化项目），Vue cli2详解，Runtime-Compiler和Runtime-only区别
一.什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时 ...
Linux运行脚手架vue,Linux Nodejs与vue脚手架详解
本篇教程介绍了Linux Nodejs与vue脚手架详解,希望阅读本篇文章以后大家有所收获,帮助大家对Node.js的理解更加深入. < https://nodejs.org/dist/v8.9 ...
vue路由详解 --基础
vue路由详解 --基础 1.router-link 和router-view组件 router-link相当于封装了一个a标签 router-view为组件显示的位置 <router-link ...
Vue实例详解与生命周期
Vue实例详解与生命周期 http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理. ...
Vue中 Vue.prototype 详解及使用——作用：避免和已被定义的数据、方法、计算属性产生冲突
Vue中 Vue.prototype 详解及使用--作用:避免和已被定义的数据.方法.计算属性产生冲突 **应用场景:**在很多组件里用到数据/实用工具,但是不想污染全局作用域.这种情况下,可以通过在 ...
【Vue组件详解（一）】
Vue组件详解(一) 简介对组件的理解传统方式编写页面组件方式编写页面非单文件组件完整代码总结简介组件的定义其实就是实现应用中局部功能代码(html,css,js)和资源(MP3 ,M ...
vue 监控元素宽度_Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
八、Vue cli3详解学习笔记
一.认识Vue CLI3 1.1 vue-cli 3 与 2 版本有很大区别: vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3 vue-cli 3 ...
05Vue.js快速入门-Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

Electron vue使用详解

Electron vue使用详解

Electron是什么？

前提条件

创建基本应用程序

创建第一个vue+node.js+ electron应用步骤：

注意：exe文件不能拿出来单独使用，可以在文件夹中双击使用，也可以使用创建快捷方式使用

Electron vue使用详解相关推荐

最新文章

热门文章

Electron vue使用详解

Electron vue使用详解

Electron是什么？

前提条件

创建基本应用程序

创建第一个vue+node.js+ electron应用步骤：

注意：exe文件不能拿出来单独使用，可以在文件夹中双击使用，也可以使用创建快捷方式 使用

Electron vue使用详解相关推荐

最新文章

热门文章

注意：exe文件不能拿出来单独使用，可以在文件夹中双击使用，也可以使用创建快捷方式使用