Electron vue使用详解
Electron+node.js+vueElectron是什么?Electron 是一个框架,可以让您使用 JavaScript, HTML 和 CSS 创建桌面应用程序。 然后这些应用程序可以打包在macOS、Windows和Linux上直接运行,或者通过Mac App Store或微软商店分发。通常,您使用每个操作系统特定的本地应用程序框架为操作系统 (OS)创建一个桌面应用程序。 Elect
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应用步骤:
-
首先创建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 :代码规范】
-
完成安装
-
-
执行:npm run dev 启动vue程序
-
证明vue项目已运行成功
-
修改config文件夹中:index.js
-
生成的时候一定要修改index.js 中的生成路径,否则后面程序运行打包页面会显示空白,找不到路径
-
将build:中assetsPublicPath: './', 加点
-
-
在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.
-
注意修改:
-
修改package.json:配置
-
配置命令:"build:electron": "npm run build && electron build/electron.js",
-
-
npm run build:electron:用来启动electron【原始创建项目就可以,项目添加了上传控件】启动成功
-
在配置打包的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图标
- 将build中的electron.js、package.json文件复制到dist中【dist文件:执行npm run build生成】
- 修改electron.js
-
修改package.json
- 修改electron.js
-
执行:npm run build:exe 打包exe命令
会出现打包成功的文件夹,在里面寻找exe , -
注意:exe文件不能拿出来单独使用,可以在文件夹中双击使用,也可以使用创建快捷方式 使用
-
更多推荐
所有评论(0)