关于electron
官方定义:Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可. 简单的说既为 使用前端HTML,CSS,JS+Node.js+chrome浏览器内核构建的跨平台桌面端应用,你只需要关注页面逻辑的实现,即可快速构建跨平台桌面应用
小白入门,大神请略过哈
1 安装
1.首先 当然是安装我们的老朋友vue(请主动升级为vue-cli3.x)
vue create pc
//启动项目,看是否可以正常跑起来
npm run serve
我觉得还是是不选Linter的好哈,个人看法
我习惯了less,个人随意哈,不装也可以
2.没毛病?那我们进行下一步,安装electron的vue插件
vue add vue-cli-plugin-electron-builder //推荐安装方式,具体为啥? 不着
有关 介绍,请关注 www.npmjs.com/package/vue… 这一步安装会非常慢,且可能安装失败,多试几次啦,并且这一步会改变我们的目录结构哈
这一步请选择6.0.0,为啥? 旧不如新嘛.哈哈
安装完成以后,如下图,表示安装成功 因为是装过了,所有成这样子了,哈哈,只要不报错,既代表安装成功
3.接下来运行我们的项目吧?
yarn electron:serve
哈哈,非常好,已经可以正常的跑起来了
4.试着打包一下?
yarn electron:build
打包结果:
一般在不进行任何配置的情况下,打包完自动存在dist_electron文件夹下,默认名字为pc setup 0.1.0
5.安装一下吧?
双击打开
嗯 你已经成功的运行并打包生成桌面端了
2 安装配置
经过第一步,虽然可以打包完成一个桌面端应用了,但你会发现 你打包的应用双击安装后,不会让你做任何自定义安装选择,既进行看快速安装服务,这样是很不任性化的,下面我们进行自定义的安装配置:
在根目录新建 vue.config.js,也就是俗称的vue 的配置文件,内容如下(功能请看注释)
module.exports = {
pluginOptions: {
electronBuilder: {
builderOptions: {
"appId": "com.example.app", //ID 不用解释吧?
"productName":"APP",//项目名，也是生成的安装文件名，即aDemo.exe
"copyright":"Copyright © 2019",//版权信息
"directories":{
"output":"./dist"//打包后的输出文件路径
},
"win":{//win相关配置
"icon":"./favicon.ico",//图标，当前图标在根目录下，注意这里有个坑
"target": [
{
"target": "nsis",//利用nsis制作安装程序
"arch": [
"x64"//64位
]
}
]
},
"nsis": {
"oneClick": false, // 是否一键安装
"allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
"allowToChangeInstallationDirectory": true, // 允许修改安装目录
"installerIcon": "./favicon.ico",// 安装图标
"uninstallerIcon": "./favicon.ico",//卸载图标
"installerHeaderIcon": "./favicon.ico", // 安装时头部图标
"createDesktopShortcut": true, // 创建桌面图标
"createStartMenuShortcut": true,// 创建开始菜单图标
"shortcutName": "APP", // 图标名称(也就是应用创建后的桌面快捷方式名称)
},
}
}
}
}
好啦,全部基础配置已经完成,会不会很帅呢? 哈哈
注意
如果项目运行或者打包过一次以后,再进行打包的时候,会报如下错误:
大致就是 你要把 上次的打包文件删除什么的,
我的总结是 每次打包的时候, 你没有进行版本号的更改造成的:两个方法:
1.package.json中更改版本号
2.删除上次打包过的程序,也可以哈.
打包不成功？
切换淘宝镜像
npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
