通过构建国家/地区目录应用程序了解 Vue 第 1 部分

大家好。这是我第一篇关于 VueJs 的文章。我学习 Vue 已经有一段时间了，说实话，这段经历对我来说是苦乐参半的。我听人说 Vue 很容易，是的，它确实很容易，因为你感觉很熟悉。它仍然是 HTML，但有一些很棒的特性。这些特性虽然很苦，但这是一个过程，所以我正在努力。在这个系列中，我只会记录我的学习经历。

在今天的节目中，我将构建一个带有暗黑模式主题的完整应用程序，这是为了确保我真正理解了之前学习的教程。这对我来说是一个挑战，我愿意接受。这篇文章本来会分成几部分，因为我不想太长。我会把它们分成几个小部分。

完成后，我们的最终应用程序应该是这样的：

我坚信编写实际的代码比仅仅狂看教程而不做任何事情要重要。

我将在 codesandbox 上构建它，当然，你也可以在 Vue 中创建新项目后，在 IDE 中执行此操作。本教程并非真正讲解如何开始使用 Vue，所以我不会讨论这方面的内容。

快速分解：
我们的应用基本上由六个组件组成，我会在后续的讲解中逐一介绍。它们是：

标题
切换
搜索
筛选
国家
国家

项目结构
下图展示了我的文件结构。只需创建不同的文件即可。我目前使用 Codesandbox 进行构建，它提供了 IDE 体验，但可以在线使用。我删除了 assets 文件夹，因为本教程中不需要它。

我们将使用 Nunito 字体，您可以在此处复制此链接并粘贴到您的 index.html 文件中，该文件位于您的公共文件夹中：

<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;600;800&display=swap" rel="stylesheet">

让我们开始构建不同的组件。

在深入探讨之前，我先简单介绍一下。我将为使用 Vanilla JS 的朋友们简单解释一下什么是组件。

无论应用程序大小，组件都是应用程序中可重复使用的一小部分。

在 Vue 等框架出现之前，我们为大型应用程序编写了大量漂亮的 HTML，我必须承认，这些 HTML 可能会让人感到困惑，甚至变得非常烦人。既然可以把它们分解成小块，并将它们组合成一个代表整个应用程序的根元素，那为什么还要写 5 万行代码呢？希望这能帮到你。

那么现在，让我们开始吧！

标题组件：
此组件代表我们的标题。它将包含一个组件，在本例中为 Toggle 组件。

<template>
  <div class="Header">
    <h2>Where in the world?</h2>
  </div>
</template>

<script>
  export default{
    name: 'Header'
  }
</script>

<style>

  .Header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 25px;
    background: #ffffff;
    color: #192734;
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
  }

</style>

添加样式后，将组件导入到根组件（在本例中是我们的App.vue文件）。现在我们的应用应该已经启动了。

内容组件：
此组件包含三个组件（country、search 和 filtersearch），它们将在我们的 components 属性中引用。components 属性是 Vue 的一项功能，允许组件跟踪所有导入到其中的组件。

<template>
  <div class="Content">
    <!-- Country component -->
    <!-- Search component -->
    <!-- Filtersearch component -->
  </div>
</template>

<script>
  export default{
    name: 'Content'
  }
</script>

<style>
  .Content{
    padding: 25px 30px;
    background: #f5f5f5;
    height: 88vh;
  }
</style>

切换组件
当我们实现暗模式功能时，此组件负责暗主题和亮主题之间的切换操作。

我将使用 Font Awesome 作为我的图标，您可以使用任何您喜欢的字体图标。

  <template>
  <div class="Toggle">
    <button>
     <i class="fa fa-moon-o"></i>
     <span>Dark Mode</span>
    </button>
  </div>
</template>

<script>
  export default{
    name: 'Toggle'
  }
</script>

<style>
  .Toggle{
    color: #197432;
  }

  button{
    background: none;
    outline: none;
    border: none;
  }

  button span{
    font-weight: 600;margin-left: 6px

  }

</style>

然后，将您的 Toggle 组件导入到您的 Header 组件中，这样就好了。

现在，导入 Header 和 Content 组件后，我们的根组件 (App.vue) 应该如下所示。您在这里看不到 Toggle 组件，因为它是附加到 Header 组件的一小部分，在本例中，它是 Header 组件的子组件。

<template>
  <div id="app">
    <Header/>
    <Content/>
  </div>
</template>

<script>
import Header from './components/Header';
import Content from './components/Content';

export default {
  name: "App",
  components: {
    Header,
    Content
  }
};
</script>

<style>
*, *::before, *::after{
  margin: 0;
  padding:0;
  outline: none;
  border: none
}

#app{
  font-family: 'Nunito Sans', sans-serif;
  min-height: 100vh;
}
</style>

我就讲到这里，明天我们再继续创建剩下的组件。我们的应用如下所示：https://12oqz.csb.app/

发挥你的创意，别像我的一样。明天见。再见！

文章来源：https://dev.to/saucekode/understanding-vue-by-building-a-country-directory-app-part-1-2n9