在这篇文章中，我们将探讨Svelte 3，一个前端JavaScript框架，它采取了与框架略有不同的方法。像React这样的框架会运送一大捆JavaScript，而Svelte应用程序会被Svelte编译器编译成JavaScript，声称比React的同等代码小很多。由于代码通过Svelte编译器运行，它也可以被优化。
Svelte还采取了一种非常不同的方法来管理数据--没有看到useState 钩子--而且它的工作非常有趣。即使你是React或任何其他流行框架的忠实粉丝，Svelte也值得一试。在这篇介绍中，我们将建立一个小的示例应用程序，以了解Svelte能提供什么。让我们开始吧!
开始吧
在本教程中，我们不打算过多地讨论捆绑和Svelte应用程序的基础设施，所以我们将按照Svelte教程来启动和运行一个应用程序。
npx degit sveltejs/template github-repository-searcher
这将把Svelte模板仓库克隆到github-repository-searcher 文件夹中（我们要构建的应用将使用GitHub API来搜索仓库），并为我们设置好所有的工具。如果你专注于学习Svelte，我强烈推荐这种方法：它可以让你直接进入框架，而不会被构建配置所困扰。
一旦上面的命令完成，你可以cd github-repository-searcher ，改变到该目录，然后运行npm install ，安装所有的依赖。一旦完成，npm run dev 将使应用程序启动和运行，使用Rollup捆绑器来构建应用程序。访问http://localhost:5000，你会看到Svelte Hello World页面，现在我们可以开始构建了。
一个Svelte组件
在我们开始构建更多的Svelte组件之前，让我们先看看模板中的现有组件。首先要注意的是，Svelte组件是在一个.svelte 文件中定义的。 App.svelte (位于src 文件夹中)被分成三个部分。
<script>
export let name;
</script>
<style>
/* CSS removed to save space */
</style>
<main>
<h1>Hello {name}!</h1>
<p>
Visit the
<a href="https://svelte.dev/tutorial">Svelte tutorial</a>
to learn how to build Svelte apps.
</p>
</main>
如果你的编辑器能理解这些Svelte文件并能正确地高亮显示它们，那么使用这些文件就会容易得多。Svelte提供了一个VS Code扩展，这是我使用的，但如果你使用不同的编辑器，我建议在谷歌上搜索。Svelte有一个规模很大的社区，所以很可能存在适用于大多数流行编辑器的插件。
Svelte组件被分成三个部分。
script标签是编写该组件的所有JavaScript的地方。style标签是定义该组件所有CSS的地方。在一个Svelte组件中，所有的CSS默认是针对该组件的，所以这里的任何样式只适用于该组件，而不是全局。- 组件中提供的任何其他内容都被视为HTML，供组件输出。Svelte还提供了模板逻辑，以支持有条件的渲染，在数组上循环，等等。
要运行我们的应用程序，请使用npm run dev 。这将运行Rollup，我们的捆绑程序，以及一个小型的HTTP服务器，它将在5000端口为我们的应用程序提供服务。
询问用户的 GitHub 用户名
我们应用程序的第一步是要求用户提供一个 GitHub 用户名。然后我们会根据这个名字在GitHub上搜索该用户拥有的仓库列表。让我们更新一下App.svelte 来实现这一目的。
首先，在script 块中，删除export let name 这一行。这是我们在Svelte中定义道具的方式，其工作原理与React中的道具相同。这里的export 关键字声明了这个值是一个道具，将由组件的父级提供。不过在我们的例子中，我们的组件不会接受任何属性，所以我们可以删除它。然后你还需要更新src/main.js ，删除props: {...} 的代码，因为我们的App 组件不接受任何道具。一旦你完成了这些，main.js 应该看起来像这样。
import App from './App.svelte';
const app = new App({
target: document.body,
});
export default app;
这个文件包含了你的应用程序的有效入口点。如果你熟悉React的话，可以把它想象成等同于ReactDOM.render 。
让我们用我们想要的HTML来更新App.svelte 。我们将创建一个简单的表单，要求用户提供一个用户名。
<script>
</script>
<style>
main {
width: 80%;
max-width: 800px;
margin: 20px auto;
padding: 20px;
}
label {
font-weight: bold;
}
input {
width: 80%;
}
</style>
<main>
<form>
<label for="username">Enter a GitHub username:</label>
<input type="text" name="username" placeholder="jackfranklin" />
<button type="submit">Load repositories</button>
</form>
</main>
在本教程中，我们不会关注CSS（我不是设计师！），但我应用了少量的CSS，使事情看起来更漂亮一些。现在我们有了我们的表单，让我们来看看我们如何将它与Svelte连接起来。首先要注意的是，没有明确的useState 钩子或类似的东西；Svelte采取的方法更接近于其他框架，如Vue或Angular，在那里你可以将一个输入与一个值绑定。这是Svelte的一个共同主题，鉴于其明确的目标之一是让开发者写更少的代码，这不应该是一个惊喜。
让我们为输入声明一个变量。
let usernameInputField = '';
然后在模板中使用Svelte的bind:value 指令。
<input type="text" name="username" placeholder="jackfranklin" bind:value={usernameInputField}>
Svelte将为我们做剩下的事情：当用户输入输入时，变量usernameInputField 将被更新并保持同步。
一旦用户输入了用户名，我们就需要监听他们何时提交表单。Svelte使用以下语法来绑定事件监听器。
<form on:submit={onSubmit}>
这将在用户提交表单时调用onSubmit 函数。不过，Svelte还有一个技巧，那就是事件修改器。
<form on:submit|preventDefault={onSubmit}>
现在，当Svelte看到这个表单上的提交事件时，它将自动为我们调用event.preventDefault() 。我很喜欢这一点：这让我们少了一件需要担心的事情，也让我们多了一件可以交给框架的事情。
在我们的script 标签中，我们可以定义这个onSubmit 函数。它将获取用户名并调用GitHub API来获得一个仓库列表（它将返回前30个仓库，所以如果你想获得所有的仓库，你需要分页，但我们现在先不谈这个）。
async function onSubmit() {
const url = `https://api.github.com/users/${usernameInputField}/repos`;
const response = await fetch(url);
const repositories = await response.json();
console.log('loaded repositories', repositories)
}
一旦我们有了这些资源库，我们想把它们列在页面上，并允许用户搜索某个特定的资源库。与其在App.svelte 组件中做这些，不如创建一个新的组件，叫做Search.svelte 。它将接受存储库的列表，并提供一个输入，让用户搜索他们想要的存储库。
在现有的目录中创建一个新的文件，叫做Search.svelte 。我喜欢用少量的模板来启动我的组件，以检查我是否已经设置好了一切。
<script>
</script>
<style>
</style>
<p>Search component</p>
然后，当我在页面上渲染这个组件时，我就能知道它的渲染是否正确了。
