JavaScript 曾经被称为构建网站和 Web 应用程序的语言，尤其是它的一些框架，如 React、Vue 和 Angular，但随着时间的推移（早在 2009 年），JavaScript 可以在浏览器之外运行Node.js的出现，这是一个开源、跨平台的 JavaScript 运行时环境，可以在 Web 浏览器之外执行 JavaScript 代码。这使得 JavaScript 不仅可以用于 Web 应用程序，还可以用于更多方面，其中之一就是使用 Electron.js 构建桌面应用程序。

Electron 通过提供具有丰富原生（操作系统）API 的运行时，使您能够使用纯 JavaScript 创建桌面应用程序。您可以将其视为 Node.js 运行时的变体，专注于桌面应用程序而不是 Web 服务器。

在本教程中，我们将学习如何使用 Electron 构建桌面应用程序，我们还将学习如何使用 Vuejs 构建 Electron 应用程序。

注意：学习本教程需要Vue.js和Vue CLI的基本知识。本教程中使用的所有代码都可以在我的GitHub 上找到。随意克隆和玩弄它！

什么是桌面应用程序？ #

桌面应用程序是在台式机或膝上型计算机中独立运行的应用程序。它们是执行特定任务的应用程序，仅为此目的而安装。

桌面应用程序的一个示例是您的Microsoft Word，它用于创建和键入文档。常见桌面应用程序的其他示例包括 Web 浏览器、Visual Studio Code 和 Adob​​e Photoshop。桌面应用程序与 Web 应用程序不同，因为您必须安装桌面应用程序才能访问和使用它，而且它们有时不需要互联网访问即可工作。另一方面，可以通过简单地访问托管此类应用程序的 URL 来访问 Web 应用程序，并且始终需要 Internet 访问权限才能访问它们。

用于构建桌面应用程序的框架示例包括：

npm install electron --save-dev

npm install electron -g

vue create news-app


import axios from "axios";
let baseURL = `https://newsapi.org/v2`;
let apiKey = process.env.VUE_APP_APIKEY;
const instance = axios.create({
    baseURL: baseURL,
    timeout: 30000,
    headers: {
        "X-Api-Key": apiKey,
    },
});
export default instance;

<template>
    <header class="header">
        <div class="logo">
            <div class="logo__container">
                <img src="../assets/logo.png" alt="News app logo" class="logo__image" />
            </div>
            <h1>News App</h1>
        </div>
        <nav class="nav">
            <h4 class="nav__link">
                <router-link to="/home">Home</router-link>
            </h4>
            <h4 class="nav__link">
                <router-link to="/top-news">Top News</router-link>
            </h4>
            <h4 class="nav__link">
                <router-link to="/categories">News By Category</router-link>
            </h4>
        </nav>
    </header>
</template>
<script>
    export default {
        name: "app-header",
    };
</script>
<style>
    .header {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .logo {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        height: 50px;
    }
    .logo__container {
        width: 50px;
        height: 50px;
    }
    .logo__image {
        max-width: 100%;
        max-height: 100%;
    }
    .nav {
        display: flex;
        flex-wrap: wrap;
        width: 350px;
        justify-content: space-between;
    }
</style>