1.Svelte是什么?
Svelte是一款新颖的前端框架,和Vue、React类似,都是属于MVVM框架。
Svelte作者是Rich Harris,同时也是 Rollup 的作者,他设计 Svelte 的核心思想在于『通过静态编译减少框架运行时的代码量』。
从数据上来看,Svelte是仅次于React、Angular和Vue的第四大前端框架:
截止至2023年3月底,Svelte的GitHub仓库已有66.5k的star。
2.Svelte有哪些优势/特点?
简洁的API和语法
必须要夸赞一下Svelte提供的简洁而漂亮的语法。Svelte的语法接近原生JS,相当于为原生JS添加了响应式功能。Svelte没有其它框架中类似于Hook、setState或ref这样的概念,而是用非常自然的、和原生JS完全相同的语法就能实现响应式。
例如,下面是一段合规的Svelte代码,实现了一个每秒递增的计数器:
<h1>{count}</h1>
<script>
let count = 1
setTimeout(() => {
count = count + 1
}, 1000)
</script>
这段代码几乎和原生JS+HTML没有区别,根本感受不到框架的存在。仿佛Svelte变得“透明”了一样!因此,与其说Svelte是一个框架,不如说Svelte是一个“神奇”的JS编译器。
无虚拟DOM
在React和Vue纷纷引入虚拟DOM的情况下,Svelte另辟蹊径,不采用虚拟DOM!Svelte会直接操作DOM,而不需要经过虚拟DOM的diff/patch算法。因此,从理论上来说,无虚拟DOM的性能会更好,可以达到接近原生的性能。
关于为什么Svelte要采用无虚拟DOM,官方博客里给出了更详细的解释:Virtual DOM is pure overhead
静态编译和Web Component
Svelte的组件是静态编译的,也就是说不需要结合runtime就能运行。因此,你可以如同原生JS一般使用Svelte组件。甚至,你可以将Svelte编译为Web Component,从而可以在其它框架中使用Svelte组件。
优雅的动画、状态管理
与追求纯粹的React.js不同,Svelte不仅仅提供了MVVM,还包含了动画、过渡、状态管理等系列模块。Svelte在框架语法层面支持动画和状态管理,因此在Svelte中实现一个动画或者store是非常优雅的,很多操作都有现成的库或者语法糖供使用。
3.我该如何学习Svelte?
Svelte官方提供了一个交互式的教程,毫无疑问这是最合适的入门Svelte的途径。教程链接在这里。
在官方教程中,不仅有Svelte基本知识、响应式语法、属性与绑定、逻辑语句和生命周期的教程,而且还包含了状态管理、运动过渡、动画和Action等Svelte特色的内容。
4.如何开启一个Svelte项目?
Svelte官方推荐初学者的创建项目的方法是使用`npx degit sveltejs/template my-svelte-project`,但实际上一般会用SvelteKit或svelte-add创建。
使用svelte-add创建一个SvelteKit项目的指令如下,
npm create @svelte-add/kit@latest
参考svelte-add的仓库地址:https://github.com/svelte-add/svelte-add
使用svelte-add可以开箱即用地为Svelte添加Tailwindcss、Tauri、SCSS等依赖,而免去相关的配置。以下是svelte-add官方支持的依赖:
5.Svelte有哪些UI生态?
Svelte还在发展中,目前的UI生态不如Vue和React发达。以下推荐几个用的顺手的Svelte UI库:
Svelte Material UI
Material UI的Svelte版本,是一个包含众多实用组件的UI库。
官网地址在http://sveltematerialui.com/
daisyUI
基于Tailwindcss的UI库。本身并没有支持Svelte,但是由于是基于HTML的,因此与Svelte相性很好。daisyUI也是svelte-add默认支持的UI库之一,只需在用svelte-add创建项目时选择使用PostCSS->使用Taiwindcss->使用daisyUI,就能为Svelte项目添加daisyUI和Tailwindcss。
官网地址在https://daisyui.com/
IconPark
IconPark是一个图标库。同样,IconPark本身没有支持Svelte,但是可以通过SVG的形式在Svelte中使用它。以下是在Svelte中简单使用IconPark的方法。
<script>
import {Down} from "@icon-park/svg";
</script>
<div>
{@html Down({theme: 'outline'})}
</div>
官网地址在https://iconpark.oceanengine.com/official
Svelte Use
Svelte版的VueUse,提供了很多常见的功能和逻辑实现。
官网地址在https://svelte-use.vercel.app/
6.如何部署一个Svelte项目?
以下介绍如何基于SvelteKit部署Svelte项目。
SvelteKit支持多种部署方案,例如部署为静态网页、Netlify、Vercel,甚至是Tauri桌面应用程序,只需要通过设置svelte配置文件中的adapter就能完成。
关于如何设置SvelteKit的部署方案,可以参考SvelteKit的官方文档https://kit.svelte.dev/docs/building-your-app