作者选择了 开源精神疾病以作为 写给捐赠计划的一部分获得捐赠。
介绍
当涉及到软件开发时,有两个端的 stack. 一堆是用于您的软件运作的技术的集合。 Vue.js,进步的用户界面框架,是 frontend 的一部分,这是用户直接互动的堆栈的一部分。 这个前端也被称为 client 并包含了用户浏览器中渲染的一切。 技术如 HTML, JavaScript和 CSS都在客户端中渲染。
在软件开发的初始阶段,你不需要一个后端来开始。在某些情况下,后端甚至还没有被创建。在这种情况下,你可以创建自己的本地数据来构建你的接口。使用Node环境和变量,你可以通过网络调用来切换每个环境的不同数据集或在本地数据和现场数据之间切换。如果你还没有数据,有一个模仿数据层是有用的,因为它为你的前端提供测试,然后后端就准备好了。
到本教程结束时,您将创建多个节点环境,并将这些数据集转换为节点环境变量。
前提条件
要完成本教程,您将需要:
- Node.js 版本
10.6.0或更高版本安装在您的计算机上。 要在 macOS 或 Ubuntu 18.04 上安装此功能,请遵循 如何安装 Node.js 并创建本地开发环境 在 macOS 上或 如何使用 Vue.js 单页应用程序创建 Vue CLI的 如何使用 PPA 部分安装 Node.js 在 Ubuntu 18.04]的步骤。 - Vue CLI 安装在您的计算机上和新生成的项目。 要做到这一点,请遵循 How To Build A Website With HTML]系列, [How To Build A Website With CSS(LINK))系列,以及 [How To In JavaScript
步骤 1 – 使用模式创建环境
模式是Vue CLI项目的一个重要概念。 mode 是一个环境类型,或一组在构建过程中被加载的变量。这些变量存储在项目的 root 目录中的 .env 文件中。
*「開發」:在執行「vue-cli-service 服務」時使用。 *「測試」:在執行「vue-cli-service 測試:單位」時使用。
也许最常用的模式是开发模式. 这是Vue.js开发人员在本地机器上开发应用程序时使用的模式. 这个模式启动了本地节点服务器的热模块重新加载(即时浏览器更新)。 另一方面,测试模式是运行单元测试的模式。 Unit tests 是测试应用程序方法、事件和在某些情况下,用户交互的JavaScript功能。 最后的默认模式是生产。 这将您的所有代码压缩并优化性能,以便在生产服务器上托管。
从 Vue CLI为您生成的项目将这些命令预先绘制为npm run serve,npm run test:unit和npm run build。
每个环境都与其自己的.env 文件相关联,您可以设置自定义 Node 环境密钥/值对,您的应用程序可以参考。
您现在将生成一个开发环境文件,您将在教程中稍后使用它. 打开终端并在项目的根目录中输入以下内容:
1touch .env.development
在您所选择的文本编辑器中打开新创建的文件. 在此文件中,您将希望明确定义环境类型. 这是一个键/值对,可以是您想要的任何东西。
您将在教程中稍后使用此NODE_ENV来加载不同的数据集,取决于在 build 上选择的环境或模式。
1[label .env.development]
2NODE_ENV="development"
保存和退出文件。
重要的是要注意,Git将自动委托这些文件,除非您将该文件添加到您的 .gitignore 文件或附加 .local 扩展到文件名: .env.development.local。
您不局限于 Vue.js 提供的标准环境,您可能有几个其他环境,这些环境是特定于您的工作流程,接下来,您将为舞台服务器创建一个自定义环境。
首先,创建.env文件,打开您所选择的终端,然后在 root 目录中运行以下操作:
1touch .env.staging
在此文件中,创建一个键/值对,将定义这个项目的NODE_ENV。你可以打开这个文件在你的文本编辑器的选择,或者你可以使用终端修改它。
您将在教程中稍后使用此NODE_ENV来加载不同的数据集,这取决于在构建中选择的环境或模式。
将以下内容添加到文件中:
1[label .env.staging]
2NODE_ENV="staging"
在 nano 中,您可以用CTRL+X保存文件,然后用CTRL+Y保存文件。
为了使用此环境,您可以在您的 package.json 文件中注册新脚本。
在脚本部分中,添加以下突出的一行:
1[label package.json]
2{
3 ...
4 "scripts": {
5 ...
6 "staging": "vue-cli-service serve --mode staging",
7 },
8 ...
9}
保存此文件,然后离开编辑器。
您刚刚创建了一个新的脚本,可以使用npm run staging执行。旗帜--模式允许Vue CLI在启动本地服务器时使用.env.staging (或.env.staging.local)文件。
在此步骤中,您为两个 Vue.js 模式创建了自定义 NODE_ENV 变量: 开发 和 阶段化. 这些模式在为每个模式创建自定义数据集时,可以通过阅读这些文件来加载不同的数据集。
步骤 2 – 创建一个模糊数据层
正如介绍中所述,您可以通过使用 mock data layer 开始开发您的用户界面,而无需后端。 模仿数据层是为您的应用程序提供参考的本地存储的静态数据。 使用 Vue 时,这些数据文件是 JavaScript objects和 arrays。 这些数据存储的位置是您的个人偏好。 为了本教程,模仿数据文件将存储在名为数据的目录中。
在本教程中,您正在构建一个主要/详细的机场浏览器应用程序. 在主要视图中,用户将看到一系列的机场代码和位置。
在您的终端中,在 root 项目目录中,使用mkdir命令创建一个新目录:
1mkdir data
现在使用触摸命令创建一个名为.js的文件,使用airports.staging.mock.js这个命令. 命名这些文件是个人喜好,但这通常是一个好主意,以区分这个模仿数据从你的应用程序中必需的文件。
使用以下命令创建文件:
1touch data/airports.staging.mock.js
在您所选择的编辑器中,打开新创建的JavaScript文件并添加以下对象:
1[label data/airports.staging.mock.js]
2const airports = [
3 {
4 name: 'Cincinnati/Northern Kentucky International Airport',
5 abbreviation: 'CVG',
6 city: 'Hebron',
7 state: 'KY'
8 },
9 {
10 name: 'Seattle-Tacoma International Airport',
11 abbreviation: 'SEA',
12 city: 'Seattle',
13 state: 'WA'
14 },
15 {
16 name: 'Minneapolis-Saint Paul International Airport',
17 abbreviation: 'MSP',
18 city: 'Bloomington',
19 state: 'MN'
20 }
21]
22
23export default airports
在此代码块中,您正在创建代表美国机场的对象,并提供它们的名称,缩写,以及它们所在的城市和州。
接下来,为另一个环境创建一个数据集,例如开发 - 在运行npm run serve时的默认环境. 要遵循命名惯例,请使用触摸命令在终端创建一个新的文件,并命名它为airports.development.mock.js:
1touch data/airports.development.mock.js
在您所选择的编辑器中,打开新创建的JavaScript文件并添加以下对象:
1[label data/airports.development.mock.js]
2const airports = [
3 {
4 name: 'Louis Armstrong New Orleans International Airport',
5 abbreviation: 'MSY',
6 city: 'New Orleans',
7 state: 'LA'
8 },
9 {
10 name: 'Denver International Airport',
11 abbreviation: 'DEN',
12 city: 'Denver',
13 state: 'CO'
14 },
15 {
16 name: 'Philadelphia International Airport',
17 abbreviation: 'PHL',
18 city: 'Philadelphia',
19 state: 'PA'
20 }
21]
22
23export default airports
这将作为你的开发数据,当你运行npm运行服务。
现在你已经为你的环境创建了模仿数据,在下一步,你将重复或循环通过该数据与v-for指令,并开始构建用户界面。
步骤 3 – 在App.vue中通过模糊数据复制
现在你有模仿数据,你可以通过在src目录中的App.vue组件中迭代这些数据来测试环境的有用性。
首先,在您选择的编辑器中打开App.vue。
一旦打开,请删除模板标签中的所有HTML,并在脚本部分中删除导入陈述,并在导出对象中删除HelloWorld组件。
将以下突出的行添加到您的App.vue文件中:
1[label src/App.vue]
2<template>
3
4</template>
5
6<script>
7export default {
8 name: 'App',
9}
10</script>
11
12<style>
13#app {
14 font-family: Avenir, Helvetica, Arial, sans-serif;
15 -webkit-font-smoothing: antialiased;
16 -moz-osx-font-smoothing: grayscale;
17 text-align: center;
18 color: #2c3e50;
19 margin-top: 60px;
20}
21
22.wrapper {
23 display: grid;
24 grid-template-columns: 1fr 1fr 1fr;
25 grid-column-gap: 1rem;
26 max-width: 960px;
27 margin: 0 auto;
28}
29
30.airport {
31 border: 3px solid;
32 border-radius: .5rem;
33 padding: 1rem;
34}
35
36.airport p:first-child {
37 font-weight: bold;
38 font-size: 2.5rem;
39 margin: 1rem 0;
40}
41
42.airport p:last-child {
43 font-style: italic;
44 font-size: .8rem;
45}
46</style>
在这种情况下, CSS 网格被用来创建这些机场代码的卡片为一个三个网格. 注意这个网格是如何在 .wrapper 类设置的. . airport 是包含每个机场代码,名称和位置的卡片或部分。
接下来,导入先前创建的开发模仿数据. 由于这是文本 JavaScript,您可以通过 import 声明导入它。
添加以下突出的线条:
1[label src/App.vue]
2...
3<script>
4import airports from '../data/airports.development.mock'
5
6export default {
7 name: 'App',
8 data() {
9 return {
10 airports
11 }
12 }
13}
14</script>
15...
现在,模仿数据已经被导入,你可以开始使用它来构建你的界面. 在这个应用程序的情况下,重复通过这个数据与v-for指令,并显示它在你的模板:
1[label src/App.vue]
2<template>
3 <div class="wrapper">
4 <div v-for="airport in airports" :key="airport.abbreviation" class="airport">
5 <p>{{ airport.abbreviation }}</p>
6 <p>{{ airport.name }}</p>
7 <p>{{ airport.city }}, {{ airport.state }}</p>
8 </div>
9 </div>
10</template>
11...
v-for在这种情况下用于显示机场列表。
保存并关闭文件。
在您的终端中,通过运行命令启动开发服务器:
1npm run serve
Vue CLI 将为您提供一个本地地址,通常是 localhost:8080. 请在您所选择的浏览器中访问该地址。 在您的浏览器中,您将找到 airports.development.mock.js 中的数据:
在此时,您创建了一个静态模仿数据层,并在执行npm run server时加载了它,但是,您会注意到,如果您关闭服务器(CTRL+C)并启动舞台环境,您将在浏览器中获得相同的结果。
步骤 4 – 用计算属性加载特定环境数据
在 Vue 中, computed properties 是必须返回值的组件函数. 这些函数不能接受参数,并且由 Vue 缓存。 在需要执行逻辑并将返回值分配到属性时,计算属性非常有用。
在此步骤中,您将使用计算属性来使用不同的数据集用于阶段化和开发环境。
首先,打开src/App.vue,然后导入两个数据集:
1[label src/App.vue]
2...
3<script>
4import DevData from '../data/airports.development.mock'
5import StagingData from '../data/airports.staging.mock'
6
7export default {
8 name: 'App',
9 ...
10}
11</script>
12...
如果您仍然有一个运行环境,您的数据将消失,这是因为您删除了将您的JavaScript模仿数据连接到模板的数据属性。
接下来,创建一个名为airports的计算属性. 函数名称在这里很重要,因为Vue将函数的返回值分配给airports用于模板消耗。 在这个计算属性中,您需要写一些逻辑;一个if/else陈述来评估节点环境的名称。 为了在Vue中获取节点环境的值,您可以使用process.env.NODE_ENV访问它。 当您创建节点环境时,Vue将NODE_ENV自动分配到发展和阶段。
1[label src/App.vue]
2...
3<script>
4import DevData from '../data/airports.development.mock'
5import StagingData from '../data/airports.staging.mock'
6
7export default {
8 name: 'App',
9 computed: {
10 airports() {
11 if (process.env.NODE_ENV === 'development') return DevData
12 else return StagingData
13 }
14 }
15}
16</script>
17...
现在,您正在按各自的环境加载每个数据集。
在您的终端中,使用npm run serve启动本地开发环境。
1npm run serve
数据将与以前相同。
现在,首先停止服务器,然后在终端窗口中执行npm run staging。
1npm run staging
当您在浏览器中访问localhost:8080,您会发现不同的数据集。
结论
在本教程中,您使用不同的 Vue.js 环境模式工作,并将环境脚本添加到您的 package.json 文件中,您还为多个环境创建了模仿数据,并使用 v-for 指令重复了数据。
通过使用这种方法来创建一个临时的后端,您可以专注于开发您的界面和应用程序的前端. 您也不局限于任何数量的环境或Vue提供的默认环境。