Svelte

Svelte

Svelte 是一个构建 web 应用程序的工具。

初识

在其主页中写道：

_Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。

与使用虚拟（virtual）DOM 差异对比不同。Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样更新 DOM。

Svelte与Vue、React等Javascript框架一样，为用户快速构建前端脚手架提供了便捷，但是Svelte在构建/编译阶段将应用程序转换为理想的JavaScript 应用，而不是在运行阶段解释应用程序的代码，较少了系统对框架本身的开销，也就应用运行时不再依赖于框架。

学习

最近学习的过程中觉得对初学者还是相对更容易些，特别是在对Vue有一定了解后，会发现在API与规范上与Vue是非常的相似。

官方API^[1]非常的详细，内容也不是太多，当然和Vue的官网比没那么详细，但是在使用时也确实要更简单，当然现在国内网络上基本都是vue的各种信息，未来随着Svelte不断的优化与对性能的要求，相信会有更多的用户。

使用

随着node的兴起，前端的各种技术让人眼花缭乱，想要使用一个技术框架，如果没有特定的工具，单单是搭建开发环境成本都是非常大的。这里使用两种方式搭建基础的开发框架，只需要简单的几行命令就能快速构建一个干净的开发环境：

SvelteKit

基于SvelteKit提供的工具能够得到一个纯净的开发环境，
除此之外还提供并封装了一套开发规范，目前该工具仅仅是beta版本。
通过该工具构建的项目可以兼容vite配置。

        $npm init svelte@next my-app
        $cd  my-app
		$npm run dev
		$npm run dev -- --open

degit

通过该命令可以得到一个基于Sapper规范的开发环境，旨在为高性能的
Web开发提供帮助

    $npx degit "sveltejs/sapper-template#webpack" my-app
    $cd my-app
    $npm install # or yarn
    $npm run dev

当然上面的两种方式都基于其他的框架，如果仅仅想有一个单纯的Svelte开发环境，可以这样做：

    $npx degit sveltejs/template svelte-app
    $cd svelte-app
    $npm install
    $npm run dev

扩展

有了开发环境，我们还需要有支持Svelte的UI框架，目前搜索的主要包括以下几个：

• Attractions

  Attractions 是 Svelte 的时尚且实用的 UI 套件。它完全可以使用 Sass 进行样式化！整体风格不是您今天经常看到的通常的平面设计。它在必要时增加了深度，同时又不会变得太好玩

• carbon-components-svelte

  Carbon 是IBM 的开源设计系统。Carbon Components Svelte 将这个有趣的设计系统的力量带到了 Svelte。

• Svelte Material UI

  Material 是谷歌的 UI 设计系统。Svelte Material UI 以预制Svelte 组件的形式为您提供此设计系统。

• Smelte

  Smelte 是 Google Material Design 在 Svelte 和 Tailwind 之上的另一种实现。Smelte 绝对是 Svelte Material UI 的不错替代品，特别是如果您喜欢 Tailwind 的易用性。Smelte 与它很好地集成在一起，并允许您使用 Tailwind 技能来即时改变样式。

• Svelteit

  Svelteit 是一个简约的 UI/UX 组件库。它没有遵循特定的设计语言，但仍然具有很好的风格。Svelteit 的简约方法绝对值得一试。它是轻量级的，足以创建漂亮的 UI！

• Notus Svelte

  ...

问题

---

1. API ↩︎