Svelte 框架介绍

介绍

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