作者选择Open Sourcing Mental Illness接受捐赠，作为Write for DOnations计划的一部分。

介绍

说到软件开发，堆栈有两端。堆栈是用于软件运行的技术集合。Vue.js是渐进式用户界面框架，是前端的一部分，是用户直接与之交互的堆栈部分。此前端也称为客户端，包含用户浏览器中呈现的所有内容。技术，比如HTML，JavaScript的，和CSS都呈现在客户端。相比之下，后端通常通过Java、Kotlin或.NET等技术与数据或服务器交互.

的应用是数据本身，和接口（前端）是无法有效显示数据给用户为他们交互的一种方式。在软件开发的开始阶段，您不需要后端即可开始。在某些情况下，后端甚至尚未创建。在这种情况下，您可以创建自己的本地数据来构建您的界面。使用Node环境和变量，您可以在每个环境中切换不同的数据集，或者通过网络调用在本地数据和“实时”数据之间切换。如果您还没有数据，那么拥有一个模拟数据层会很有用，因为它会在后端准备好之前提供数据来测试您的前端。

在本教程结束时，您将创建多个 Node 环境并使用 Node 环境变量切换这些数据集。为了说明这些概念，您将创建许多 Vue 组件来跨环境可视化这些数据。

先决条件

要完成本教程，您需要：

• 10.6.0您的计算机上安装了Node.js 版本或更高版本。要在 macOS 或 Ubuntu 18.04 上安装它，请按照如何在 macOS 上安装 Node.js 和创建本地开发环境或如何在 Ubuntu 18.04 上安装 Node.js 的使用 PPA 安装部分中的步骤进行操作。
• Vue CLI 安装在您的机器上并生成了一个新项目。为此，请按照如何使用 Vue CLI 生成 Vue.js 单页应用程序的步骤 1 和 2进行操作。
• 您还需要具备 JavaScript、HTML 和 CSS 的基本知识，您可以在我们的如何使用 HTML 构建网站系列、如何使用 CSS 构建网站系列和如何使用 JavaScript 编码中找到这些知识。

步骤 1 — 使用模式创建环境

在 Vue CLI 项目中，模式是一个重要的概念。甲模式是一个环境类型，或一组被构建期间加载变量。这些变量存储在.env项目根目录下的文件中。作为默认vue-cli-service插件的一部分，您可以立即访问三种模式。这些都是：

• development:vue-cli-service serve执行时使用。
• test:vue-cli-service test:unit执行时使用。
• production: 在vue-cli-service build和vue-cli-service test:e2e执行时使用。

也许最常用的模式是development模式。这是 Vue.js 开发人员在本地机器上处理应用程序时使用的模式。此模式启动本地节点服务器，并启用热模块重新加载（即时浏览器刷新）。该test模式下，另一方面，是在运行单元测试的模式。单元测试是JavaScript函数的测试应用方法，事件，并在某些情况下，用户交互。最后一个默认模式是production. 这会压缩您的所有代码并优化其性能，以便将其托管在生产服务器上。

这对你产生该项目的Vue CLI有这些命令预映射到npm run serve，npm run test:unit和npm run build。

每个环境都与其自己的.env文件相关联，您可以在其中放置应用程序可以引用的自定义 Node 环境键/值对。从 CLI 生成项目后，您将没有这些文件，但您可以在终端中使用一个命令添加这些文件。

您现在将生成一个开发环境文件，您将在本教程后面使用该文件。打开终端并在项目的根目录中输入以下内容：

touch .env.development

在您选择的文本编辑器中打开新创建的文件。在此文件中，您需要明确定义环境类型。这是一个键/值对，可以是你想要的任何东西。但是，定义与.env文件名对应的环境类型被认为是最佳实践。

您将NODE_ENV在本教程的稍后部分通过根据构建时选择的环境或模式加载不同的数据集来使用它。添加以下行：

NODE_ENV="development"

保存并退出文件。

当应用程序处于开发模式时，此文件中的键/值对只会影响您的程序。需要注意的是，Git会自动提交这些文件，除非您在文件中添加.gitignore文件或将.local扩展名附加到文件名：.env.development.local.

您不仅限于 Vue.js 提供的标准环境。您可能还有其他几个特定于您的工作流程的环境。接下来，您将为staging服务器创建自定义环境。

首先.env为登台环境创建文件。打开您选择的终端并在根目录中运行以下命令：

touch .env.staging

在此文件中，创建将定义NODE_ENV此项目的键/值对。您可以在您选择的文本编辑器中打开此文件，也可以使用终端对其进行修改。Nano是一个在终端窗口中使用的编辑器。您可能有其他编辑器，例如Vim。

您将NODE_ENV在本教程的稍后部分通过根据构建时选择的环境或模式加载不同的数据集来使用它。

将以下内容添加到文件中：

NODE_ENV="staging"

保存并退出文件。在 nano 中，您可以使用CTRL+Xthen保存文件CTRL+Y。

为了使用这个环境，您可以在您的package.json文件中注册一个新脚本。现在打开这个文件。

在该"scripts"部分中，添加以下突出显示的行：

{
  ...
  "scripts": {
    ...
    "staging": "vue-cli-service serve --mode staging",
  },
  ...
}

保存此文件，然后退出编辑器。

您刚刚创建了一个可以使用npm run staging. 该标志--mode让 Vue CLI 知道在启动本地服务器时使用.env.staging（或.env.staging.local）文件。

在这一步中，您NODE_ENV为两种 Vue.js 模式创建了自定义变量：development和staging. 当您为这些模式中的每一个创建自定义数据集时，这些模式将在以下步骤中派上用场。通过以一种或另一种模式运行项目，您可以通过读取这些文件来加载不同的数据集。

步骤 2 — 创建模拟数据层

如简介中所述，您可以使用模拟数据层在没有后端的情况下开始开发用户界面。模拟数据层是存储在本地供您的应用程序参考的静态数据。使用 Vue 时，这些数据文件是 JavaScript对象和数组。这些存储在哪里是您的个人喜好。在本教程中，模拟数据文件将存储在名为data.

在本教程中，您将构建一个“主要/细节”机场浏览器应用程序。在“主”视图中，用户将看到许多机场代码和位置。

在您的终端中，在根项目目录中，使用以下mkdir命令创建一个新目录：

mkdir data

现在创建一个使用命令.js命名的文件。命名这些文件是个人喜好，但通常最好将此模拟数据与应用程序中的基本文件区分开来。就本教程而言，模拟文件将遵循以下命名约定：.airports.staging.mock.jstouchname.environment.mock.js

使用以下命令创建文件：

touch data/airports.staging.mock.js

在您选择的编辑器中，打开这个新创建的 JavaScript 文件并添加以下对象数组：

const airports = [
    {
        name: 'Cincinnati/Northern Kentucky International Airport',
        abbreviation: 'CVG',
        city: 'Hebron',
        state: 'KY'
    },
    {
        name: 'Seattle-Tacoma International Airport',
        abbreviation: 'SEA',
        city: 'Seattle',
        state: 'WA'
    },
    {
        name: 'Minneapolis-Saint Paul International Airport',
        abbreviation: 'MSP',
        city: 'Bloomington',
        state: 'MN'
    }
]

export default airports

在此代码块，您正在创建代表在美国机场的对象和提供他们name，abbreviation以及city和state在它们所在。然后导出数组以使其可用于程序的其他部分。这将充当您的“暂存”数据。

接下来，为另一个环境创建一个数据集，比如“development”——运行时的默认环境npm run serve。要遵循命名约定，在终端中使用touch命令创建一个新文件并将其命名为airports.development.mock.js：

touch data/airports.development.mock.js

在您选择的编辑器中，打开这个新创建的 JavaScript 文件并添加以下对象数组：

const airports = [
    {
        name: 'Louis Armstrong New Orleans International Airport',
        abbreviation: 'MSY',
        city: 'New Orleans',
        state: 'LA'
    },
    {
        name: 'Denver International Airport',
        abbreviation: 'DEN',
        city: 'Denver',
        state: 'CO'
    },
    {
        name: 'Philadelphia International Airport',
        abbreviation: 'PHL',
        city: 'Philadelphia',
        state: 'PA'
    }
]

export default airports

当您运行npm run serve.

现在您已经为您的环境创建了模拟数据，在下一步中，您将使用v-for指令迭代或循环该数据并开始构建用户界面。这将为您提供使用不同模式时更改的直观表示。

第 3 步 – 遍历模拟数据 App.vue

现在您有了模拟数据，您可以通过App.vue在src目录中的组件中迭代这些数据来测试环境的有用性。

首先，App.vue在您选择的编辑器中打开。

打开后，删除template标签内的所有 HTML并删除import该script部分中的语句。另外，删除对象中的HelloWorld组件export。还提供了一些通用样式以使数据更易于阅读。

将以下突出显示的行添加到您的App.vue文件中：

<template>

</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1rem;
  max-width: 960px;
  margin: 0 auto;
}

.airport {
  border: 3px solid;
  border-radius: .5rem;
  padding: 1rem;
}

.airport p:first-child {
  font-weight: bold;
  font-size: 2.5rem;
  margin: 1rem 0;
<^>}

.airport p:last-child {
  font-style: italic;
  font-size: .8rem;
}
</style>

在这种情况下，CSS Grid用于将这些机场代码卡片创建为三个网格。注意这个网格是如何在.wrapper类中设置的。该.airport是一个包含各机场代码，名称和位置的卡或部分。

接下来，导入之前创建的开发模拟数据。由于这是普通的 JavaScript，您可以通过import语句导入它。您还需要使用data属性注册此数据，以便 Vue 模板可以访问此数据。

添加以下突出显示的行：

...
<script>
import airports from '../data/airports.development.mock'

export default {
  name: 'App',
  data() {
    return {
      airports
    }
  }
}
</script>
...

现在已经导入了模拟数据，您可以开始使用它来构建您的界面。在此应用程序的情况下，使用v-for指令遍历此数据并将其显示在您的模板中：

<template>
  <div class="wrapper">
    <div v-for="airport in airports" :key="airport.abbreviation" class="airport">
      <p>{{ airport.abbreviation }}</p>
      <p>{{ airport.name }}</p>
      <p>{{ airport.city }}, {{ airport.state }}</p>
    </div>
  </div>
</template>
...

v-for 在这种情况下用于呈现机场列表。

保存并关闭文件。

在您的终端中，通过运行以下命令启动开发服务器：

npm run serve

Vue CLI 会为你提供一个本地地址，一般是localhost:8080. 在您选择的浏览器中访问该地址。您将airports.development.mock.js在浏览器中找到渲染的数据：

此时，您创建了一个静态模拟数据层，并在执行npm run serve. 但是，您会注意到，如果您停止服务器 ( CTRL+C) 并启动临时环境，您将在浏览器中获得相同的结果。在下一步中，您将告诉您的应用程序为每个环境加载一组数据。为此，您可以使用 Vue 计算属性。

第 4 步 – 使用计算属性加载特定于环境的数据

在 Vue 中，计算属性是必须返回值的组件函数。这些函数不能接受参数，并且被 Vue 缓存。当您需要执行逻辑并将返回值分配给属性时，计算属性非常有用。在这方面，就 而言，计算属性的行为类似于data属性template。

在此步骤中，您将使用计算属性为环境staging和development环境使用不同的数据集。

首先打开src/App.vue并导入两组数据：

...
<script>
import DevData from '../data/airports.development.mock'
import StagingData from '../data/airports.staging.mock'

export default {
  name: 'App',
  ...
}
</script>
...

如果您仍然运行其中一个环境，您的数据将消失。那是因为您删除了data将 JavaScript 模拟数据连接到template.

接下来，创建一个名为 的计算属性airports。函数名在这里很重要，因为 Vue 正在获取函数的返回值并将其分配给以airports供template消费。在这个计算属性中，您需要编写一些逻辑；评估 Node 环境名称的if/else语句。要获取Vue中Node环境的值，可以通过process.env.NODE_ENV. 当您创建 Node 环境时，Vue 会自动分别分配NODE_ENV给development和staging。

...
<script>
import DevData from '../data/airports.development.mock'
import StagingData from '../data/airports.staging.mock'

export default {
  name: 'App',
  computed: {
      airports() {
        if (process.env.NODE_ENV === 'development') return DevData
        else return StagingData
      }
  }
}
</script>
...

现在，您正在根据各自的环境加载每组数据。

在您的终端中，使用npm run serve.

npm run serve

数据将与之前的相同。

现在，通过首先停止服务器然后npm run staging在终端窗口中执行来启动暂存环境。

npm run staging

当您localhost:8080在浏览器中访问时，您会发现一组不同的数据。

结论

在本教程中，您使用了不同的 Vue.js 环境模式并将环境脚本添加到您的package.json文件中。您还为许多环境创建了模拟数据，并使用v-for指令遍历数据。

通过使用这种方法制作临时后端，您可以专注于界面和应用程序前端的开发。您也不限于任何数量的环境或 Vue 提供的默认环境。拥有.env四个或更多环境的文件并不少见：开发、登台、用户验收测试 (UAT) 和生产。

有关Vue.js和Vue CLI 3 的更多信息，建议通读他们的文档。有关 Vue 的更多教程，请查看Vue 主题页面。