Meteor Cloud
教程
指南
API 文档
论坛
Vue 教程
Meteor Cloud
教程
指南
API 文档
论坛
Meteor Vue 教程

1：创建应用

1.1：安装 Meteor

首先我们需要安装 Meteor。

安装最新的官方 Meteor 版本，请按照我们文档中的步骤操作。

1.2：创建 Meteor 项目

使用 Vue 设置 Meteor 最简单的方法是使用命令 meteor create，并使用选项 --vue-2 和您的项目名称。

旁注：由于 meteorJS 版本 2.9，默认的 –vue 将创建一个 vue3 应用，为了遵循本教程，请使用 vue2 命令：--vue-2

meteor create --vue-2 simple-todos-vue --prototype

Meteor 将为您创建所有必要的文件。

位于 client 目录中的文件正在设置您的客户端（web），例如，您可以看到 client/main.jsx，Meteor 在其中将您的 App 主组件渲染到 HTML 中。

此外，检查 server 目录，Meteor 在其中设置服务器端（Node.js），您可以看到 server/main.js 正在使用一些数据初始化您的 MongoDB 数据库。您无需安装 MongoDB，因为 Meteor 提供了一个嵌入式版本，您可以直接使用它。

您现在可以使用以下命令运行您的 Meteor 应用

meteor run

不用担心，从现在开始，Meteor 将使您的应用与您所有更改保持同步。

您的 Vue 代码将位于 imports/ui 目录中，App.vue 文件是您的 Vue 待办事项应用的根组件。

快速浏览一下 Meteor 创建的所有文件，您现在不需要理解它们，但了解它们在哪里是有益的。

1.3：创建 Task 组件

您现在将进行第一次更改。在您的 ui/components 文件夹中创建一个名为 Task.vue 的新文件。

此文件将导出一个名为 Task 的 Vue 组件，该组件将表示您待办事项列表中的一个任务。

imports/ui/components/Task.vue

<template>
  <li>{{ this.task.text }}</li>
</template>

<script>
  export default {
      props: ["task"],
      data() {
          return {};
      }
};
</script>

由于此组件将在列表中，因此您将返回一个 li 元素。

1.4：创建示例任务

由于您尚未连接到服务器和数据库，因此让我们定义一些示例数据，这些数据将很快用于渲染任务列表。它将是一个数组，您可以将其称为 tasks。

imports/ui/App.vue

<script>
  import Vue from "vue";
  import Task from "./components/Task.vue";

  export default {
      components: {
        Task
      },
      data() {
          return {};
      },
      methods: {
      getTasks() {
      return [
        { _id: 1, text: "This is task 1" },
        { _id: 2, text: "This is task 2" },
        { _id: 3, text: "This is task 3" }
      ];
    }
  }
};
</script>

您可以在每个任务上将任何内容作为 text 属性。发挥创意吧！

1.5：渲染示例任务

现在，我们可以使用 Vue 实现一些简单的渲染逻辑。现在，我们可以使用我们之前的 Task 组件来渲染我们的列表项。

请参见下面我们如何更改 App 组件的模板部分以添加一个

imports/ui/App.vue

<template>
  <div class="container">
    <header>
      <h1>Todo List</h1>
    </header>
    <ul>
      <Task
        v-for="task in getTasks()"
        v-bind:key="task._id"
        v-bind:task="task"
      />
    </ul>
  </div>
</template>

您可以在此处阅读有关 Vue 迭代的更多信息 此处。

通过此覆盖，您已从 App 组件中删除了 Hello 和 Info。也请删除 Hello.vue 和 Info.vue 文件。

1.6 移动设备外观

让我们看看您的应用在移动设备上的外观。您可以模拟浏览器中应用的移动环境（我们假设您使用的是 Google Chrome，因为它是当今最流行的浏览器），然后右键单击，然后检查，这将在您的浏览器中打开一个名为 Dev Tools 的新窗口。在 Dev Tools 中，您有一个显示移动设备和平板电脑的小图标，请查看此图标的位置。

单击它，然后选择您要模拟的手机，并在顶部栏中。

您也可以在手机上检查您的应用，您可以使用本地 IP 在手机浏览器中连接到您的应用。

此命令至少应在 Unix 系统上打印您的本地 IP ifconfig | grep "inet " | grep -Fv 127.0.0.1 | awk '{print $2}'

您将看到如下所示的内容

如您所见，所有内容都很小，这是因为我们没有为移动设备调整视口，您可以通过将这些行添加到 client/main.html 文件（在 head 标签中，在 title 之后）来修复此问题和其他类似问题。

client/main.html

  <meta charset="utf-8"/>
  <meta http-equiv="x-ua-compatible" content="ie=edge"/>
  <meta
      name="viewport"
      content="width=device-width, height=device-height, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
  />
  <meta name="mobile-web-app-capable" content="yes"/>
  <meta name="apple-mobile-web-app-capable" content="yes"/>

现在，您的应用应如下所示

回顾：您可以检查本步骤结束时代码应如何编写 此处

在下一步中，我们将使用 MongoDB 数据库来存储我们的任务。

在 GitHub 上编辑
// 搜索框