electron简单应用开发(electron-quick-start + vuecli + 打包)
2020/2/26 4:15:41
本文主要是介绍electron简单应用开发(electron-quick-start + vuecli + 打包),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1. 简介
electron: 用html开发跨平台的桌面应用
官网 https://www.electronjs.org/
vuecli:常用的前端脚手架工具
2. 启动electron-quick-start
2.1 下载最新版的electron快速启动示例代码,https://github.com/electron/electron-quick-start
2.2 用开发工具打开(本人使用的是Visual Studio Code)
//安装工程,速度很慢,建议用cnpm install //cnpm install安装时有时会报某个版本不存在,需要手动指定一个版本cnpm install electron@8.0.0 npm install //启动工程 npm start
2.3 使用自己的页面
修改main.js
//执行我们自己的一个静态页面 mainWindow.loadFile('html/index.html')
3. VUECLI 工程
3.1 省略vuecli工程的插件
3.2 vuecli工程的打包
//在工程的根目录下新建vue.config.js文件 //文件内容, 用相对路径打包的意思 module.exports = { publicPath: './' } //打一个生产的包 npm run build
3.3 把生产的文件夹dist复制到electron目录下
//修改main.js mainWindow.loadFile('dist/index.html') //启动electron工程 npm start
4. 桌面应用打包
4.1 我们使用electron-packager来打包,参考 https://www.npmjs.com/package/electron-packager
//安装electron-packager npm install electron-packager
4.2 打包
npm i electron-packager //执行打包命令 electron-packager ./ demo --overwrite --platform=win32 --asar --out=OutApp --app-version=0.0.1 //上面这条命令会下载一个包,导致打包很慢 //我们可以把包先准备好 //打开 https://github.com/electron/electron/releases/,https://npm.taobao.org/mirrors/electron/ //下载对应package.json里对应的electron版本(如果install用了其他版本,这里要下载对应版本),我们这里下载win版本 //https://github.com/electron/electron/releases/download/v8.0.1/electron-v8.0.1-win32-x64.zip //把下载的包放到某个目录下C:\D\java\workspace_Electron\ele-os //重新运行打包命令 electron-packager ./ demo --overwrite --platform=win32 --asar --out=OutApp --app-version=0.0.1 --electron-zip-dir=C:\D\java\workspace_Electron\ele-os //打开工程根目录下的OutApp, 打开里面的文件夹运行应用
这篇关于electron简单应用开发(electron-quick-start + vuecli + 打包)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 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对象教程:初学者的全面指南