svelte3前端框架入门教程

一、概述

svelte是一个组件框架，相对于传统界面框架React、Vue比较，最重要的区别是编译时与运行时。svelte是一个编译时框架，在构建时会将组件转换成高效率执行的命令代码，这样使得更新Dom更有效率，而传统框架浏览器必须做额外的工作才能将声明性代码转换为DOM操作，另外由于运行时可以用于优化的信息不足，大多数时候效率不及svelte。svelte作为一种构建用户界面的全新方法，其特点如下：

1. 更少的代码，编译时将源代码编译成无框架的、更小的执行代码。
2. 没有虚拟DOM，不再需要通过虚拟DOM对比差异去优化更新Dom操作。
3. 更简单的响应式编程。

svelte 3是目前的最新稳定版，更新了许多语法及功能，官方博文着重提到，这个版本的核心概念就是响应性（Reactivity）。我们顺着这一特性，开启了入门之路。

二、安装

安装svelte有两种方法，分别为Svelte REPL下载安装和npm安装。

1.下载安装：
访问Svelte REPL，点击右上角工具栏的下载图标，将svelte-app.zip文件保存到计算机并解压。打开终端到该目录安装，如下：

cd /path/to/svelte-app
npm i

然后启动服务器：

npm run dev

输入http://localhost:5000就可以访问到建好的项目了。

2.使用npm
在终端中，可以使用命令立即创建一个新项目，如下所示：

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install
npm run dev

这将在my-svelte-project目录中创建一个新项目，用npm安装其依赖，并访问http://localhost:5000。

三、入门实例

1.反应性赋值，在App.svelte输入以下代码查看结果。

<script>
	let count = 0;

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

2.反应性声明，在App.svelte输入以下代码查看结果。

<script>
	let count = 1;

	// the `$:` means 're-run whenever these values change'
	$: doubled = count * 2;
	$: quadrupled = doubled * 2;

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Count: {count}
</button>

<p>{count} * 2 = {doubled}</p>
<p>{doubled} * 2 = {quadrupled}</p>

3.反应性语句，在App.svelte输入以下代码查看结果。

<script>
	let count = 0;

	$: if (count >= 10) {
		alert(`count is dangerously high!`);
		count = 9;
	}

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

四、编译完成

打开终端，运行一下命令：

npm run build

编译文件已生成到./public文件夹。