快速入门
svelte传承于Ractive，在语法上与Vue有一定的相似性，所以对于熟悉Vue的同学来说可能更加接受其编码风格。
# Svelte介绍
对于这个框架的评价来说，这里可以引用尤大知乎的回答：
作者是
Rich Harris，也就是Ractive,Rollup和Buble的作者，堪称前端界的轮子哥，现在又带来新轮子了！这个框架的API设计是从Ractive那边传承过来的（自然跟Vue也非常像），但这不是重点。Svelte的核心思想在于『通过静态编译减少框架运行时的代码量』。举例来说，当前的框架无论是React、Angular还是Vue，不管你怎么编译，使用的时候必然需要『引入』框架本身，也就是所谓的运行时 (runtime)。但是用Svelte就不一样，一个Svelte组件编译了以后，所有需要的运行时代码都包含在里面了，除了引入这个组件本身，你不需要再额外引入一个所谓的框架运行时！......
完整回答直通车：如何看待 svelte 这个前端框架？
# 组件基本结构
# script
逻辑操作，以及数据的提供方，类比于Vue的script标签的含义。
# 示例代码
<script>
const str = '我是一个Svelte'
</script>
2
3
# HTML
对于界面HTML标签编写或Svelte组件使用，都将直接可以在文件顶层进行编写，无需包裹在template标签中。
# 示例代码
<script>
const str = '我是一个Svelte'
</script>
<p>Hello Svelte</p>
2
3
4
5
# style
对于一个前端项目来说，不可或缺的还有对于样式的控制，那么在Svelte中又是如何对元素的样式进行控制的呢。
其实还是在一定程度上和Vue差别不大的，可以说熟悉Vue的童鞋在看完它基本的组件的编写方式之后，估计会直呼，这不就是Vue么。
# 示例代码
<script>
const str = '我是一个Svelte'
</script>
<p>Hello Svelte</p>
<style>
p{
color: #fcf;
}
</style>
2
3
4
5
6
7
8
9
10
11
清晰明了，可以说几乎从当前我们看上去的Svelte的写法几乎和Vue并无太大差别。
这里别说人家
Svelte是抄Vue的，人家是传承于Ractive（再次强调）。
# 总结
看完Svelte组件的基本机构之后，相信你也能使用Svelte编写简单的静态页面了，当然对于前端人来说，只能编写静态页面显然是不太符合我们格调的，接下来我们将研究它是如何进行逻辑操作以及页面数据的控制的。