vue + Electron 制作桌面应用

vue制作桌面应用

1.vue打包
2.配置 Electron

1.vue打包

这里使用vue原生打包命令，对vue项目进行打包

npm run build

2.配置 Electron

使用 Electron 制作桌面应用需要两个配置文件
1.package.json
创建一个package.json文件，将以下代码放入

{"name": "demo", //项目名称"productName": "demo","author": "作者","version": "1.0.4","main": "main.js","description": "项目描述","scripts": {"start": "electron .", //启动electron项目"pack": "electron-builder --dir","dist": "electron-builder","postinstall": "electron-builder install-app-deps","packager": "electron-packager . myClient --win --out ../myClient --arch=x64 --app-version=0.0.1 --electron-version=2.0.0" //将项目打包为exe文件},"build": {"electronVersion": "2.0.18","win": {"requestedExecutionLevel": "highestAvailable","target": [{"target": "nsis","arch": ["x64"]}]},"appId": "demo","artifactName": "demo-${version}-${arch}.${ext}","nsis": {"artifactName": "demo-${version}-${arch}.${ext}"}},"dependencies": {"core-js": "^2.4.1","electron-updater": "^2.22.1"},"devDependencies": {"electron-packager": "^12.1.0","electron-builder": "^20.19.2"}
}

2.mian.js
创建main.js 将以下代码放入
【注】win.webContents.openDevTools(); 这句代码的意思是开启调试窗口，生成exe文件时需要注释掉

const {app, BrowserWindow} =require('electron');//引入electron
let win;
const path = require('path')
let windowConfig = {width:800,height:600,webPreferences:{preload: path.resolve(__dirname, 'electron-preload.js')}
};//窗口配置程序运行窗口的大小
function createWindow(){win = new BrowserWindow(windowConfig);//创建一个窗口win.loadURL(`file://${__dirname}/index.html`);//在窗口内要展示的内容index.html 就是打包生成的index.htmlwin.webContents.openDevTools();  //开启调试工具win.on('close',() => {//回收BrowserWindow对象win = null;});win.on('resize',() => {win.reload();})
}
app.on('ready',createWindow);
app.on('loaded',()=>{console.log("aaa")
});
app.on('window-all-closed',() => {app.quit();
});
app.on('activate',() => {if(win == null){createWindow();}
});const { ipcMain } = require('electron')
ipcMain.on("ping",function(even,arg){console.log(arg)even.returnValue = "pong"
})

3.将package.json文件和main.js文件放入到 vue打包完成的dist目录下

4.在dist目录下打开node命令窗口，执行 npm install 或 cnpm install 下载依赖

npm install

5.依赖下载成功后执行 npm start ，启动该项目，并查看项目是否运行成功

npm start

运行成功后的结果：

6.如果运行后没有发现bug，则执行 npm run packager ，将项目制作成exe文件，制作成功后，会在当前目录下生成桌面应用的安装包

npm run packager

打包成功后的文件夹

点击该exe文件就可以直接打开应用了

vue + Electron 制作桌面应用相关推荐

使用vue+electron创建桌面软件（一）
使用vue项目,添加electron,创建桌面软件.软件的本地运行.打包等功能环境配置 node环境开发环境:linux vue-vli 若没有vue环境,则终端安装:npm install -g ...
使用vue+electron创建桌面软件（二）
文章目录打包配置界面配置窗口配置自定义顶部栏 vue+electron项目,对软件进行配置,包括打包图标.名称等:自定义窗口最小化.全屏.退出软件.界面信息传递等打包配置在vue.conf ...
bigemap+vue+electron做桌面端GIS开发（3D 版）
1. vue环境的搭建 1.1. 下载安装首先在node官网下载node 下载完成后后安装,双击安装包,开始安装,一直点next即可, 安装路径默认在 C:\Program Files 也可以自定义 ...
vue+electron 跨平台桌面应用开发实战教程
一.创建项目 1.1 安装vue-cli 先查看是否已经安装了vue-cli,vue-cli的版本是什么? 查看版本命令:vue --version 如果版本叫老,可以直接卸载,再安装最新版本卸载命 ...
vue项目通过Electron生成桌面应用
vue项目通过Electron生成桌面应用一.安装 1. 把electron的官方demo下载下来 2. 安装cnpm 3. npm start 启动electron 4. 修改vue项目 5. 打 ...
新星计划 Electron+vue2 桌面应用 2 搭建及运行
基础内容:新星计划 Electron+vue2 桌面应用 1 基础_lsswear的博客-CSDN博客根据使用过的经验和官网的描述,大概可以有四种方式: 自己创建项目(仅使用npm) 用Electr ...
Vue 打包成桌面应用 vue打包成桌面应用 vue 打包桌面应用 vue 部署桌面应用 vue部署为桌面应用 vue部署为桌面应用 vue 桌面应用
文章目录使用到的工具 electron 第一步打包 dist 第二步创建配置文件 main.js package.json 第三步安装 Electron 第四步测试运行第五步安装 el ...
Vue-Cli4.x项目通过electron打包桌面应用程序
发现网上的教程大部分都是vue2.x目录结构不太一样还有就是将一些问题整合在一起傻瓜式教程步骤一下载electron的demo项目 electorn GitHub 下载demo electro ...
记一次electron开发桌面英语(自用，类歌词）
记一次electron开发桌面英语(自用,类歌词) 晒一下自己的考试成绩单,不感兴趣可以跳过制作初心进入正题功能安装(略) 项目结构目录 package.json main.js index. ...
在deepin系统中制作桌面快捷方式
在使用deepin-wine 安装一些软件的时候,每次启动都需要到.deepinwine目录下运行deepin-wine xx.exe.笔者在安装过HeidiSql之后,一直苦于这种情况.比较好的解决 ...

vue + Electron 制作桌面应用

vue制作桌面应用

1.vue打包

2.配置 Electron

vue + Electron 制作桌面应用相关推荐

最新文章

热门文章