electron + vue 快速实h5开发桌面软件 及打包exe
时间:2021-04-09
本文章向大家介绍electron + vue 快速实h5开发桌面软件 及打包exe,主要包括electron + vue 快速实h5开发桌面软件 及打包exe使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一.安装vue
先搭建vue的开发环境,node,npm或者yarn,最新版vue,不会找度娘
二.创建一个vue项目
vue create myelectronapp
有特殊配置就自己配置,没有就一路回车,就不具体讲了。可能有点慢,不要急。
依次运行最后两个可以查看默认项目
三.安装election包
vue脚手架3.0的插件vue-cli-plugin-electron-builder 帮助vue脚手架直接引入Electron的依赖,并生成相关文件和配置
1,安装 electron-builder
vue add electron-builder
2,选择最新版本
注意特殊情况它来啦
如果你卡在了我标红的位置,恭喜你解锁了特殊配方,不要慌,我也卡住过,好像是它下载的那个地址是错误的,具体我也不知道。如果没有报错直接完成就可以跳过下面这段,
解决方法:
1,设置npm为华为云镜像
npm config set registry https://mirrors.huaweicloud.com/repository/npm/ npm cache clean -f
2,设置浏览器引擎驱动镜像地址
npm config set chromedriver_cdnurl https://mirrors.huaweicloud.com/chromedriver
3,设置Electron镜像地址
npm config set electron_mirror https://mirrors.huaweicloud.com/electron/
4,设置electron_builder_binaries镜像地址
npm config set electron_builder_binaries_mirror https://mirrors.huaweicloud.com/electron-builder-binaries/
5,安装electron
npm install --save-dev electron
6,安装yarn (没安的话)
npm install -g yarn
7,设置yarn镜像
yarn config set registry https://mirrors.huaweicloud.com/repository/npm/
8,下载electron-builder
yarn add electron-builder --dev
安装成功!!!! (以后其他地方安装就不用上面的配置了,直接 vue add electron-builder 即可)
四.启动election项目
yarn electron:serve 或者 npm run electron:serve
启动成功到弹出软件框有点慢,不急喝杯茶再来
等倒计时,
ok,和浏览器开发差不多,熟悉的节目,熟悉的老婆
五.打包election项目
yarn electron:build 或者 npm run yarn electron:build
打包成功
双击即可打开。有没有发现我的代码截图后面有什么东西,没错那是我第二个老婆,至于不知道怎么弄个老婆的,等我下章告诉你们。欧克!告辞。
原文地址:https://www.cnblogs.com/fanjlqinl/p/14637888.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- c++结构体实例之按结构体中指定变量进行排序
- springboot消息之整合rabbitmq
- springboot消息之@RabbitListener和@EnableRabbit
- c++实例之通讯录管理系统之显示菜单和退出功能(一)
- c++实例之通讯录管理系统之添加联系人功能(二)
- c++实例之通讯录管理系统之显示联系人功能(三)
- c++实例之通讯录管理系统之删除联系人功能(四)
- springboot检索之Elasticsearch简介
- c++实例之通讯录管理系统之查找联系人功能(五)
- 【python-leetcode424-滑动窗口法】替换后的最长重复字符
- c++实例之通讯录管理系统之修改联系人功能(六)
- 解决arxiv.org打开pdf缓慢问题
- c++实例之通讯录管理系统之清空联系人功能(七)
- springboot任务之定时任务
- springboot检索之整合elasticsearch并使用jest操作