electron+vue实现桌面端程序

electron+vue实现桌面端程序

    • electron入门
      • 1. 准备:安装node.js
      • 2. 创建文件夹,初始化node.js项目结构
      • 3. 安装 Electron 包依赖
      • 4. 在`package.json`中添加代码
      • 5. 主程序`main.js`结构
      • 7. `preload.js`
      • 8. `index.html`
    • 使用VUE+electron
      • 1. 搭建VUE2项目
      • 2. 安装Electron
      • 3. 打包成软件包

electron入门

1. 准备:安装node.js

验证:node-v / npm -v

2. 创建文件夹,初始化node.js项目结构

npm init
按照提示,会自动生成一个package.json

3. 安装 Electron 包依赖

npm install --save-dev electron

4. 在package.json中添加代码

{
  "scripts": {
    "start": "electron ."
  }
}

5. 主程序main.js结构

主程序入口都是main文件,新建 main.js 空文件
运行主程序:npm run start
此时不会有任何报错,但是由于主程序内部没有任何内容,所以没有任何内容显示

  1. 两个Electron模块
    • app模块:管理程序事件生命周期
    • BrowserWindow模块:创建管理应用程序窗口
   const { app, BrowserWindow } = require('electron')
  1. 创建浏览窗口—加载index.html—打开开发工具
const createWindow = () => {
	//1. 创建浏览窗口
	const mainWindow = new BrowserWindow({
		width:800,
		height:600,
		webPreferences:{
			preload:path.join(_dirname,'preload.js')  //创建界面时会运行的脚本内容,见第七步
		}
	})
	//2. 加载index.html
	mainWindow.loadFile('index.html')
	//3. 打开开发工具
	mainWindow.webContents.openDevTools()
}

//结束Electron初始化、创建浏览器窗口时调用
app.whenReady().then(()=>{
    createWindow()
    app.on('activate' , ()=>{
        if(BrowserWindow.getAllWindows().length === 0){  //没有窗口打开
            createWindow()
        }
    })
})

//监听全部窗口关闭事件
app.on('window-all-closed',()=>{
    if(process.platform !== 'darwin'){
        app.quit()
    }
})

7. preload.js

所有的node.js API接口 都可以在 preload进程中被调用

window.addEventListener('DOMContentLoaded',() => {
//....加载时执行的function
})

8. index.html

<body>
	<h1>Hello Worldh1>
	
	<script src="./renderer.js">script> 
body>
    

electron+vue实现桌面端程序_第1张图片

以上我们完成一个基本的Electron框架下的桌面端程序

使用VUE+electron

前提:
安装好node环境,检验方式:打开cmd窗口,输入node -v

1. 搭建VUE2项目

  1. 全局安装vue脚手架:
    npm i vue-cli -g
    在这里插入图片描述

  2. 安装webpack:
    npm i webpack -g

  3. 进入项目目录,创建基于webpack模板的新项目:
    shift+右键,打开cmd
    vue init webpack 项目名【配置可以如下图所示】
    electron+vue实现桌面端程序_第2张图片

  4. 运行:
    npm run dev

  5. 执行生成命令
    npm run build
    修改一下路径,不然打包出来的界面可能会是空白一片
    electron+vue实现桌面端程序_第3张图片

以下2、3步操作全都在dist目录下操作:相当于此时的dist目录成为了入门中的工作目录,而入门中的index.html便是此时打包生成的index.html

2. 安装Electron

  1. 进入dist目录,npm install electron
  2. 创建程序入口main.jspackage.json [依照自己的习惯也可以添加其他的文件,这两个是基础文件]
  3. 依照入门中介绍的方式填充main.jspackage.json
    electron+vue实现桌面端程序_第4张图片

以上,我们完成一个桌面端程序的展示
接下来我们要实现将改程序打包成软件包,生成可执行的exe文件

3. 打包成软件包

执行命令

$ npm install electron-builder
$ npm install electron-packager

package.json中添加命令

"scripts":{
    "packager":"electron-packager . helloworld --out dist --arch=x64 --overwrite --ignore=node_modules",
    "start":"electron ."
}

终端执行命令npm run packager

关于打包命令:“packager”:“electron-packager . map --platform=win32 --out release --arch=x64 --electron-version=1.8.4 --overwrite --ignore=node_modules”

参数说明:

更多参数请参考官网

参数名 说明 备注
map 生成exe文件的名称
–platform=win32 确定了1构建哪个平台的应用 darwin、linux、mas、win32
release 指定打包文件输出的文件夹位置
–arch=x64 决定使用x86还是x64,还是两个架构都用
–overwrite 覆盖原有的build,让新生成的包覆盖原来的包

dist下的目录结构:
electron+vue实现桌面端程序_第5张图片

以上我们就实现了一个基于vue框架结合Electron框架的window桌面端程序
至于其他操作系统桌面端平台我们只需要在打包时修改命令相关参数即可。

你可能感兴趣的:(前端_Vue,前端_electron,vue.js,electron,javascript)