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 ↩︎