一, 介绍与需求
1.1, 介绍
1. Electron 简介
Electron https://electronjs.org/ 是用 html,CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库. Electron 通过将 Chromium 和 Node.JS https://nodejs.org/en/ 合并到同一个运行时环境中, 并将其打包为 Mac,Windows 和 Linux 系统下的应用来实现这一目的. 目前, Electron 已被 Microsoft,Facebook,Slack 和 Docker 等大厂接受, 应用涉及开发工具, 社交应用, 音乐, 游戏, 金融等领域.
2. Node.JS 简介
Node.JS 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.
Node.JS 使用了一个事件驱动, 非阻塞式 I/O 的模型, 使其轻量又高效.
3. 脚手架 - electron-vue 简介
electron-vue 是一个结合 electron 和 vue.js 的项目, 非常方便建立起 electron 应用程序模版. Vue.JS https://cn.vuejs.org/ 是当前比较火的 JavaScript MVVM 库, 它以数据驱动和组件化的思想构建前端应用, 被越来越多的前端开发者接受. 采用 electron-vue 脚手架之后, 你可以使用 webpack,electron-packager 或 electron-builder,vue-router,vuex 等最常用的插件.
1.2, 需求
开发跨平台的桌面应用
二, 基于 node 开发
为了快速搭建应用框架, 我们可以选择 Electron 的 electron-quick-start 项目
第一步: 新建目录 desktopApp, 打开命令行, 进入此目录, 输入 Git 命令下载 electron-quick-start 项目代码.
1 Git clone https://github.com/electron/electron-quick-start
第二步: 进入目录 electron-quick-start, 输入命令 cnpm install, 安装相关依赖包.
- cd electron-quick-start
- cnpm install
第三步: 输入命令 NPM start, 运行项目. 如果弹出 Hello World 的窗口, 说明项目运行成功.
1 NPM start
第四步: 配置静态资源文件
需要在项目文件夹下新建资源文件夹 (这里新建名字为 res 的目录), 将程序发布所用的图标等资源统一放进资源文件夹进行管理.(打包 Windows exe 需要 ico 文件像素为 256*256);
第五步: 安装打包工具全局安装 electron-builder 模块
1 cnpm install electron-builder -g
安装完成后, 可输入命令 build --help, 测试是否安装成功
第六步: 添加 electron-builder 编译所需要的属性
- "devDependencies": {
- "electron": "^3.0.7"
- },
- "build": {
- "appId": "com.y.ledou",
- "copyright":"Y",
- "productName":"乐豆",
- "dmg":{
- "window":{
- "x":100,
- "y":100,
- "width":500,
- "height":300
- }
- },
- "win":{
- "icon":"res/icon_net.png"
- },
- "mac": {
- "icon": "res/icon.icns"
- },
- "linux": {
- "icon": "res"
- }
- }
第七步: 打包应用
配置完成后在项目目录里执行命令 build --win --x64. 执行命令后即开始打包, 无报错后即打包成功. 如下图:
打包成功后, 会在项目目录里自动生成 dist 目录, 里边存有生成的桌面应用安装包. 如下图:
然后双击乐豆 Setup 1.0.0.exe 安装运行即可
三, 基于 electron-vue 开发
3.1, 搭建项目并运行
第一步: 安装 vue-cli
electron-vue 脚手架安装
1 NPM install -g vue-cli
第二步: 初始化项目
1 vue init simulatedgreg/electron-vue desktopApp
然后一路回车即可
第三步: 编译并运行项目
执行下面的指令, 如果没有报错, 会自动弹出程序界面, 说明程序运行起来了.
- cd desktopApp
- yarn (或者 NPM install)
- yarn run dev(或者 NPM run dev)
第四步: 项目打包
运行如下命令:
1 NPM run build
如果看到如下结果, 则表示打包成功
3.2, 项目架构
自动生成了基本的代码结构
src/main/index.JS 是程序入口文件, electron-vue 已经帮我们生成好代码. 如果需要修改程序加载, 窗口属性等设置, 在这里修改.
src/renderer/components: 存放页面布局文件, 你开发页面时在这个文件下创建页面的 index.vue,index.JS,index.CSS 文件.
src/renderer/router/index.JS: 设置页面转跳路由.
build: 存放项目打包生成的安装包
四, 应用与总结
4.1,build 可以指定打包的类型
Windows 系统: build --win --x64/--x32
Linux 系统: build --Linux
Mac 本: build --Mac
4.2,Web 打包成桌面应用
第一步: 配置环境
1, 安装 node
2, 安装 nativefier
1 NPM install nativefier -g
第二步: 制作应用
命令行输入 nativefier [options] <targetUrl> [dest]
其中 options 是选项, targetUrl 是目标链接, dest 是生成位置, 默认当前位置.
以我的博客为例, 最简单的命令为:
1 nativefier "https://www.cnblogs.com/jackson-zhangjiang/"
详情可查看文档:
第三步: 效果
1, 创建的快捷方式
2, 打开的效果
来源: https://www.cnblogs.com/jackson-zhangjiang/p/10136980.html