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

1：创建应用

1.1：安装 Meteor

首先，我们需要安装 Meteor。

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

1.2：创建 Meteor 项目

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

meteor create --svelte simple-todos-svelte --prototype

之后，Meteor 会为你创建所有必要的文件。

位于 client 目录中的文件正在设置你的客户端（Web），例如，你可以看到 client/main.js，这是你的应用在客户端开始的地方。

此外，检查 server 目录，Meteor 在那里设置服务器端（Node.js），你可以看到 server/main.js。使用 Meteor，你无需安装 MongoDB，因为 Meteor 提供了一个嵌入式版本，可以直接使用。

你可以在 package.json 中定义主要的客户端和服务器文件，如下所示

{
  ..,
  "meteor": {
    "mainModule": {
      "client": "client/main.js",
      "server": "server/main.js"
    }
  }
}

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

cd simple-todos-svelte
meteor run

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

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

以下是创建的一些文件的简要概述

client/main.js        # a JavaScript entry point loaded on the client
client/main.html      # an HTML file that defines view templates
client/main.css       # a CSS file to define your app's styles
server/main.js        # a JavaScript entry point loaded on the server
test/main.js          # a JavaScript entry point when running tests
package.json          # a control file for installing npm packages
package-lock.json     # describes the npm dependency tree
node_modules/         # packages installed by npm
.meteor/              # internal Meteor files
.gitignore            # a control file for git

1.3：创建 Task 组件

要开始处理我们的待办事项应用，让我们用下面的代码替换默认启动应用的代码。从那里，我们将讨论它的作用。

首先，让我们更改 <div/>，它位于 imports/ui 文件夹内的 App.svelte 文件中。

imports/ui/App.svelte

..

<div class="container">
    <header>
        <h1>Todo List</h1>
    </header>

    <ul>
        {#each getTasks() as task (task._id)}
            <Task task={task} />
        {/each}
    </ul>
</div>

此外，你可以创建 <Task /> 组件。继续并创建一个名为 Task.svelte 的新文件，放在 imports 文件夹中。

imports/ui/Task.svelte

<script>
    export let task;
</script>

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

现在我们需要数据才能在此页面上呈现。

1.4：创建示例任务

由于你还没有连接到服务器和数据库，让我们定义一些示例数据，这些数据将用于呈现任务列表。它将是一个列表项数组，你可以将其命名为 tasks。继续并将 App.svelte 文件中的 <script/> 标记更改为以下代码

imports/ui/App.svelte

<script>
    import Task from './Task.svelte';

    const getTasks = () => ([
        { _id: 'task_1', text: 'This is task 1' },
        { _id: 'task_2', text: 'This is task 2' },
        { _id: 'task_3', text: 'This is task 3' },
    ])
</script>

...

你可以在每个任务中将任何内容作为 text 属性。发挥你的创意！

在 Svelte 中，单文件组件使用 .svelte 文件扩展名创建，并且包含三个部分：脚本部分、标记（HTML）部分和样式部分。在脚本部分，你将编写在创建组件实例时运行的 JavaScript 代码。Svelte 组件格式在 Svelte 指南 中有完整解释。

你可以在 Meteor 指南的 应用结构文章 中阅读更多关于如何构建代码的信息。

1.5 移动端外观

让我们看看你的应用在移动设备上的显示效果。你可以通过在浏览器中 右键单击 你的应用来模拟移动环境（我们假设你使用的是 Google Chrome，因为它是最受欢迎的浏览器），然后 检查，这将在你的浏览器中打开一个名为 开发者工具 的新窗口。在 开发者工具 中，你有一个显示移动设备和平板电脑的小图标。

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

你也可以在你的手机上检查你的应用。为此，请使用你的本地 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"/>

现在你的应用应该如下所示：

1.6 热模块替换

默认情况下，Meteor 在使用 Svelte 时会为你添加一个名为 hot-module-replacement 的包。此包更新正在运行的应用中在重建期间修改的 JavaScript 模块。减少开发过程中的反馈周期，因此你可以更快地查看和测试更改（它甚至会在构建完成之前更新应用）。

你应该在此处添加 dev-error-overlay 包，以便你可以在 Web 浏览器中看到错误。

meteor add dev-error-overlay

你可以尝试犯一些错误，然后你将在浏览器中看到错误，而不仅仅是在控制台中。

回顾：你可以查看本步骤结束时代码应该是什么样子，请点击此处

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

在 GitHub 上编辑
// 搜索框