Svelte 框架介绍

7.16

介绍

Svelte 是一个编译器型的 web 框架。拥有简化语法和高性能,最终编译成纯 JavaScript,自带响应式状态管理。

svelte (adj): slender and elegant

例子

Examples

<script>
  let name = 'world';
</script>

<h1>Hello {name}!</h1>

使用

degit 是基于 git 的工具,仅下载最新版本的代码。

# rollup
npx degit sveltejs/template svelte-app

# webpack
npx degit sveltejs/template-webpack svelte-app

cd svelte-app
npm install
npm run dev

语法

框架基于 .svelte 文件,类似 Vue 的 .vue 文件。

API docs

COMPONENT FORMAT

<script context="module">, <script>, <style>

TEMPLATE SYNTAX

  • Tags

  • Attributes and props

  • Text expression

  • Control flow

      {#if ...}
      {#each ...}
      {#await ...}
      {@html ...}
    
  • Inline style

    <div style="top: {top}px"></div>
    
  • Element directives

    • use:action

      action = (node: HTMLElement, parameters: any) => {
          update?:  (parameters: any) => void,
          destroy?: () => void
      }
      

      action 是函数,当元素创建时调用。可以带参数,返回带 update 方法的对象,那么当参数变化且应用到元素后,update 方法会被调用。可以看成属于特定元素的生命周期函数。

RUNTIME

COMPILE TIME

构建通用组件

component-template 是通用组件的模板,基于该模板构建组件后可以发布到 npm 。svelte 项目安装后可以直接使用。

Svelte-kit

svelte-kit 是基于 Svelte (UI 框架) 的 Web 框架,同时具有服务端渲染和快速路由切换等优势。

使用

需要 node 版本 > 12.20 || 14.13

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