1：创建应用

1.1：安装 Meteor

首先，我们需要安装 Meteor。

按照我们文档中的步骤安装最新的官方 Meteor 版本 查看安装步骤。

1.2：创建 Meteor 项目

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

meteor create --vue simple-todos-vue

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

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

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

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

meteor run

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

您的 Vue 代码将位于 imports/ui 目录中，App.vue 文件是 Vue To-Do 应用的根组件。

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

1.3：安装 prettier 和 eslint

例如，Vue 在 vscode 上没有原生支持。要在您喜欢的 IDE 上配置 Vue，您需要安装和配置 prettier 和 eslint。这些工具将通过格式化代码并根据您的配置显示一些错误和警告来帮助您保持代码整洁和组织。Eslint 会识别有问题的模式，而 prettier 会格式化代码。

要安装 prettier 和 eslint，请运行：

meteor npm install --save-dev prettier eslint eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier

现在，创建一个名为 .eslintrc.js 的文件，并将下面的代码粘贴到其中。

.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    ecmaVersion: 8,
  },
  extends: ['eslint:recommended', 'plugin:vue/vue3-recommended', 'prettier'],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': ['error'],
    'vue/require-default-prop': 0,
    'vue/html-indent': ['error', 2],
    'vue/singleline-html-element-content-newline': 0,
    'vue/component-name-in-template-casing': ['error', 'PascalCase'],
    'vue/multi-word-component-names': 0,
  },
  globals: {
    _: true,
  },
}

还要创建一个名为 .prettierrc 的文件，并将下面的代码粘贴到其中。

.prettierrc

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80
}

如果您使用 vscode，则需要安装 prettier 和 eslint 的扩展程序。然后，重新启动窗口。

1.4：清理 UI 文件夹

让我们删除一些我们目前不需要的文件。打开 imports/ui 文件夹并删除：

• About.vue
• AppMenu.vue
• Hello.vue
• Home.vue
• Info.vue

这意味着您将只保留 App.vue、main.js 和 router.js 在 ui 文件夹中。

现在我们删除了一些组件，我们需要修复我们的 router.js 文件。

imports/ui/router.js

import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: App,
    },
  ],
})

在这个文件中，我们可以创建一些路由并定义每个路由应该渲染的组件。

此外，我们需要修复 App 组件，因为我们正在导入一个不再存在的组件。

imports/ui/App.vue

<template>
  <div class="p-8">
    <h1>Hello Meteor</h1>
  </div>
</template>

1.5：创建 Task 组件

我们将所有 Vue 组件存储在 ui/components 文件夹中。因此，让我们创建此文件夹并在其中创建一个名为 Task.vue 的文件。

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

imports/ui/components/Task.vue

<script setup>
defineProps({
  task: {
    type: Object,
    required: true,
  },
});
</script>

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

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

1.6：创建示例任务

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

imports/ui/App.vue

<script setup>
import Task from './components/Task.vue'

const 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.7：渲染示例任务

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

请参阅下面如何更改 App 组件的模板部分以添加：

imports/ui/App.vue

<template>
  <div class="container">
    <header>
      <h1 class="text-4xl font-bold text-gray-800 my-4">Todo List</h1>
    </header>
    <ul class="list-disc list-inside p-4">
      <Task v-for="task in getTasks()" :key="task._id" :task="task" />
    </ul>
  </div>
</template>

您可以在这里了解更多关于 Vue 迭代的信息 了解更多。

1.8 移动端外观

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

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

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

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

您将看到如下内容：

回顾：您可以查看此步骤结束时代码应有的样子 查看代码

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