vuecli + electron 的简单方式electron-builder
2020/3/17 4:01:18
本文主要是介绍vuecli + electron 的简单方式electron-builder,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
之前介绍一个vuecli + electron的方法,最近发现一个更简单的方式
参考:
https://nklayman.github.io/vue-cli-plugin-electron-builder/
1. 用vuecli创建一个vue工程
过程省略
2. 安装electron-builder
vue add electron-builder // 安装的东西很多,注意网络 // 可以先安装cnpm install --save-dev electron-chromedriver // 本人安装时,报了很多错,后来隔天新建了个工程,一下子就安装成功了
安装成功后,运行npm run electron:serve,如果出现以下页面,说明成功了
3. 打包
// 执行下面的命令即可 npm run electron:build //在dist_electron目录下会发现一个exe //点击运行(不过比较慢) //还有一个win-unpacked文件夹,里面是我们之前打包的模式,点击里面的exe,即可运行
4. 自定义图标
4.1 安装组件,cnpm install --save-dev electron-icon-builder
4.2 准备好你的图标,放到/public/icon.png
4.3 在package.json的scripts下新增一条命令
"electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten"
4.4 执行,npm run electron:generate-icons,生成一系列图标
4.5 删除dist_electron文件夹,重新执行打包命令,npm run electron:build,会发现应用的图标变了
这篇关于vuecli + electron 的简单方式electron-builder的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南