基于Vue+Electron构建桌面应用实践

Electron是GitHub开发的一个开源库，用于使用HTML、CSS和JavaScript构建跨平台桌面应用。Electron通过将Chromium和Node.js组合成一个运行时来实现这一点，并且可以为Mac、Windows和Linux打包应用程序。为了快速开始，我正在使用GregHolguin的electron-vue样板。它为开发者提供了vue-cliscanffolding、常用的Vue插件、打包器、测试、开发工具和其他功能。我们要建造什么？我们将基于OpenWeatherMapAPI构建与上一篇文章中所述相同的应用程序，以查看用户选择的城市的天气。如果您只想查看Electron驱动的应用程序的最终代码，请单击此处：https://github.com/NataliaTep...安装Electron-vue样板文件是作为VueCLI2.x的模板构建的，包括自定义应用程序选项.因此，需要全局安装：npminstall-gvue-cli如果你喜欢使用最新版本的VueCLI，你需要安装全局桥：npminstall-g@vue/cli@vue/cli-init然后，初始化你的项目：vueinitsimulatedgreg/electron-vueweather-app这将启动一个安装项目，其中包括一些供你选择的选项。其中一个很酷的事情是，如果你需要一些常用的插件和库，比如axios，你可以在安装过程中选择它们。几乎所有选项都很明确，但有一个问题：我决定搜索并在StackOverflow上找到了一个有用的线程。基于这个线程，它看起来像electronbuilder(electron-builder)更适合我，所以我切换到它。设置好项目后，我们需要打开应用程序所在的文件夹，运行npminstall或yarninstall，现在我们就可以开始了。了解应用结构安装完成后，可以在src中看到main和renderer两个文件夹，Electron主进程需要使用第一个。根据electron-vue的文档，Electron中运行package.json主脚本的进程称为主进程。在主进程中运行的脚本可以通过创建网页来显示GUI。在主文件夹中有两个文件：index.js和index.dev.js。第一个是你的应用程序的主文件，这是用来启动electron的文件。它也被用作webpack的生产入口文件。所有主要的流程工作都应该从这里开始。index.dev.jsis专门用于开发，因为它安装了electron-debug和vue-devtools。您可以在开发应用程序时忽略它。此外，渲染器进程需要渲染器文件夹。由于Electron使用Chromium来显示网页，所以它也使用了Chromium的多进程架构。Electron中的每个网页都在自己的进程中运行，称为渲染器进程。正如您可能注意到的那样，它是一个“正常”的Vue应用程序结构，具有资产和组件文件夹：main.js和App.vue文件。这是后者的结构：如果您尝试运行开发任务，您将得到以下结果：所以这里有一个landing-page组件也启用了devtools。现在，我们可以改变它。快速构建（脚手架）应用程序与Vuido不同，Electron支持使用HTML标签而不是原生组件构建的应用程序。因此，我们将创建一个类似于普通Web应用程序的结构，并使用CSS对其进行样式设置。请注意：我没有故意安装任何CSS框架或组件库：我想在不添加任何不同依赖项的情况下比较包大小。两个项目中唯一使用的库是axios。第一步是删除登录页面组件。然后我添加了一个简单的输入字段和一个按钮：

输入城市名称以查看当前天气