Electron + Vue开发跨平台桌面应用程序

尽管B / S是当前发展的主流，但是C / S仍然有很大的市场需求. 由于浏览器沙箱的限制，Web应用程序在某些情况下无法满足使用要求，并且桌面应用程序可以读写本地文件，调用更多系统资源以及Web开发的低成本和高效率优势. 这种跨平台方法正在成为在开发人员中越来越受欢迎.

Electron是基于Chromium和Node.js的跨平台开发框架，它使用HTML，CSS和JavaScript来构建跨平台应用程序，与Mac，Windows和Linux兼容. 目前，Electron已创建了包括VScode和Atom在内的大量应用程序.

在创建Electron跨平台应用程序之前，您需要安装一些常用工具，例如Node，vue和Electron.

转到该节点的官方网站下载页面nodejs.cn/download/，然后下载相应的版本. 建议下载时下载稳定版本. 如果使用Homebrew安装Node，建议在安装过程中将npm仓库映像更改为淘宝映像，如下所示.

npm config set registry http://registry.npm.taobao.org/
或者
npm install -g cnpm --registry=https://registry.npm.taobao.org

首先执行以下命令以确认本地安装的vue-cli版本.

vue -V

如果尚未安装或不是最新版本，则可以执行以下命令来安装/升级.

npm install @vue/cli -g

使用以下命令安装Electron插件.

npm install -g electron
或者
cnpm install -g electron

为了验证安装是否成功，可以使用以下命令.

electron --version

电子正式改进了一个简单的项目，您可以执行以下命令将项目克隆到本地.

git clone https://github.com/electron/electron-quick-start

然后在项目中执行以下命令以启动项目.

cd electron-quick-start
npm install 
npm start

启动后项目的效果如下.

此外，我们可以使用vue-cli脚手架工具创建项目.

vue init simulatedgreg/electron-vue

然后按照以下提示逐步选择选项以创建项目，如下所示.

然后，使用npm install命令安装项目所需的依赖项软件包. 安装完成后，可以使用npm run dev或npm run build命令来运行electron-vue模板应用程序. 运行效果如下图所示.

Electron的源代码根据Chromium的拆分约定分为许多部分. 为了更好地理解源代码，您可能需要了解Chromium的多进程体系结构. 电子源代码目录的结构和含义如下:

Electron
├──atom - Electron 的源代码
|  ├── app - 系统入口代码
|  ├── browser - 包含了主窗口、UI 和其他所有与主进程有关的东西，它会告诉渲染进程如何管理页面
|  |   ├── lib - 主进程初始化代码中 JavaScript 部分的代码
|  |   ├── ui - 不同平台上 UI 部分的实现
|  |   |   ├── cocoa - Cocoa 部分的源代码
|  |   |   ├── gtk - GTK+ 部分的源代码
|  |   |   └── win - Windows GUI 部分的源代码
|  |   ├── default_app - 在没有指定 app 的情况下 Electron 启动时默认显示的页面
|  |   ├── api - 主进程 API 的实现
|  |   |   └── lib - API 实现中 Javascript 部分的代码
|  |   ├── net - 网络相关的代码
|  |   ├── mac - 与 Mac 有关的 Objective-C 代码
|  |   └── resources - 图标，平台相关的文件等
|  ├── renderer - 运行在渲染进程中的代码
|  |   ├── lib - 渲染进程初始化代码中 JavaScript 部分的代码
|  |   └── api - 渲染进程 API 的实现
|  |       └── lib - API 实现中 Javascript 部分的代码
|  └── common - 同时被主进程和渲染进程用到的代码，包括了一些用来将 node 的事件循环
|      |        整合到 Chromium 的事件循环中时用到的工具函数和代码
|      ├── lib - 同时被主进程和渲染进程使用到的 Javascript 初始化代码
|      └── api - 同时被主进程和渲染进程使用到的 API 的实现以及 Electron 内置模块的基础设施
|          └── lib - API 实现中 Javascript 部分的代码
├── chromium_src - 从 Chromium 项目中拷贝来的代码
├── docs - 英语版本的文档
├── docs-translations - 各种语言版本的文档翻译
├── spec - 自动化测试
├── atom.gyp - Electron 的构建规则
└── common.gypi - 为诸如 `node` 和 `breakpad` 等其他组件准备的编译设置和构建规则

正常开发时，需要重点关注src，package.json和appveyor.yml目录. 此外，其他需要注意的目录如下: -script-scripts，用于开发目的，例如构建，打包，测试等. -gyps文件中使用的-tools-tool脚本，但与脚本目录不同，此目录为脚本不应由用户供应商直接调用-第三方依赖项的源代码. 为了防止人们将其与Chromium源代码中的同名目录混淆，在这里我们不使用third_party作为目录名称-node_modules-在构建中使用. ninja-dist的输出目录-由脚本/ create-dist.py script-external_binaries创建的临时发行目录-gyp不支持的下载的预编译第三方框架

使用电子提示模板创建的电子项目结构如下所示.

类似于前端项目的项目结构，Electron项目的目录结构如下: -electron-vue: Electron模板配置. -build: 文件夹，用于存储项目构建脚本. -config: 存储项目的一些基本配置信息，最常用的是端口转发. -node_modules: 此目录存储项目的所有依赖项，即npm install命令下载的文件. -src: 项目的源代码存储在此目录中，即开发人员编写的代码位于此处. -static: 用于存储静态资源. -index.html: 这是项目的主页，条目页面，并且是整个项目的唯一HTML页面. -package.json: 定义项目的所有依赖关系，包括开发依赖关系和发行依赖关系.

对于开发人员来说web桌面应用开发，90％的工作是在src中完成的，并且src中的文件目录如下.

Electron应用程序分为三个基本模块: 主过程，过程间通信和渲染过程.

Electron运行package.json主脚本（background.js）的过程称为主过程. 在主流程中运行的脚本会创建一个网页来显示用户界面. 电子应用程序始终只有一个主要过程.

由于Electron使用Chromium显示网页，因此也使用了Chromium的多进程体系结构. Electron中的每个网页都以其自己的呈现过程运行. 在普通浏览器中，网页通常在沙盒环境中运行，并且不允许访问本机资源. 但是，Electron允许用户在Node.js API的支持下与页面上的操作系统进行一些底层交互.

主进程使用BrowserWindow实例创建页面. 每个BrowserWindow实例在其自己的呈现过程中运行页面. 当BrowserWindow的实例被破坏时，相应的渲染过程也将终止. 主要过程管理所有网页及其相应的呈现过程. 每个渲染过程都是独立的，它只关心其运行的网页.

在Electron目录中web桌面应用开发，src将包含两个主目录和渲染器目录.

主目录将包含两个文件index.js和index.dev.js.

renderer是渲染过程目录，通常是项目开发源代码的存储目录，包括资产，组件，路由器，商店，App.vue和main.js. -assets: 资产（js，css）下的文件将合并到dist文件夹下项目目录中的文件中. -components: 此文件用于存储应用程序开发组件，这些组件可以是自定义组件. -router: 如果您知道vue-router，则以与vue-router类似的方式使用Electron项目的路由. -modules: electron-vue使用vuex的模块结构来创建多个数据存储，并将它们保存在src / renderer / store / modules中.

electron-vue-cloud-music是使用Electron + Vue + Ant Design Vue技术开发的跨平台桌面应用程序. 下载链接: github.com/xiaozhu188/electron-vue-cloud-music. 它具有以下功能: -拖放播放-桌面歌词-迷你模式-自定义托盘右键菜单-任务栏缩略图，歌曲操作-音频可视化-自动/手动检查和更新-Nedb持久性-自定义安装路径，安装界面Beautify-在浏览器中启动客户端-Travis CL，AppVeyor自动构建-皮肤更改，下载，本地歌曲匹配，网络更改桌面通知，将歌曲/歌曲列表/ MV /视频等共享到QQ空间登录，私有Fm，歌曲列表，专辑，歌手，排行榜，MV，视频，评论，搜索，用户，动态，粉丝，关注者，云盘，收藏夹...-心跳模式，歌词的微调，下一首播放，其他播放，单循环随机播放，面向列表循环路由，部分刷新，主页列调整和持久性...

以下是一些运行效果:

qq音乐播放器基于electronic-vue开发的音乐播放器，该界面模仿QQ音乐，并使用了堆栈技术electronic-vue + vue + vuex + vue-router + element-UI. 您可以使用以下方法来运行项目.

git clone https://github.com/SmallRuralDog/electron-vue-music.git
cd electron-vue-music
npm install
# 运行开发模式
npm run dev
# 打包安装文件 
npm run build

部分运行效果如下所示.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-193845-1.html