提到前端開發框架，我相信大家第一時間想到的就是 Vue、React 和 Angular 三大主流。畢竟它們各個都是 GitHub 上 10w+ star 的知名項目，每個前端工程師至少要學習其中一個框架。

但是，最近幾年，一個新的前端框架逐漸出現在人們眼前，它就是后起之秀『 Svelte 』。目前已經接近 4w 個 star，雖然暫時無法撼動三大主流框架的霸主地位，但是其恐怖的 star 增速，值得我們關注和思考。

Svelte 到底是什么樣的框架？
它和三大主流框架有什么不同？
為什么發展如此迅猛？

帶著這些問題，我們一起來學習下 Svelte 框架，并用它從 0 到 1，開發一個讀書筆記小網站。

可以先通過一分鐘的小視頻簡單地了解下 Svelte ~

揭開 Svelte 的神秘面紗

按照官網的描述，Svelte 是一種構建用戶界面的框架，框架自身具有反應性，可以幫助開發者書寫更精簡的代碼，開發出體積更小、更迅速的 App。

使用 Svelte 框架進行開發，需要遵循其特定的語法，編寫 .svelte 后綴的文件。如下是 Svelte 框架的 Hello World 代碼：

你可能會質疑：這不就和 Vue、React 之類的前端框架一樣么？不就是用個數據綁定、抄個 API 和語法風格、改個文件后綴名么？憑什么能獲得 4w 的 star？

其實，近幾年出現的新前端框架并不少，但都被遮擋在了三座大山下，沒有一個能夠像 Svelte 一樣在短期內得到大量的關注。

究竟是什么讓 Svelte 框架破圈突圍，劍指 Angular ？

Svelte 新在哪兒？

我們先來看兩張圖，是對 20 多種前端框架 Demo 項目的性能對比和評測。

第一張圖是對比各框架開發的項目的尺寸：

第二張圖是對比各項目的 Lighthouse 性能評分：

從上面兩張圖，我們發現，Svelte 框架無論是在項目尺寸還是性能方面，都表現卓越。一個用 Svelte 開發的 Demo 項目竟然僅有 15 KB！怎么會這么小呢？有黑魔法？

這和 Svelte 獨特的設計思想有關?；舅袀鹘y的前端框架，在項目運行時都會依賴框架本身的代碼，即引入了框架作為 runtime（運行時），因此需要將框架代碼打進項目包，占用了一定的包大小。

比如 Vue 項目的包管理文件 package.json 中，將 Vue 作為生產環境運行時依賴引入。

"dependencies": {"vue": "^2.6.11" }

而 Svelte 框架的核心思想在于『 通過靜態編譯減少框架運行時的代碼量 』（尤雨溪大佬的解釋）。

Svelte 不會將自己打包進項目，而是在編譯打包階段，將 Svelte 組件轉換為原生 DOM 操作。因此，使用 Svelte 開發的項目，并不依賴 runtime，更沒有像 Vue 和 React 中的 Virtual DOM，項目的體積也非常地小。

下面是 Svelte 項目的 package.json 文件，可以發現，svelte 是被作為開發時依賴引入。

"devDependencies": {"svelte": "^3.0.0" }

這是 Svelte 和其他前端框架的明顯區別。與其說是 “新”，倒不如說是回歸原始，返璞歸真。

除了不依賴 runtime 和 Virtual DOM 外，Svelte 另一個 “新” 體現在其自身具有反應性，可以輕松地實現狀態管理，而無需像 Vue 和 React 框架一樣引入 Vuex 和 Redux 之類的狀態管理庫。這一點給開發者提供了極大地便利。

了解了 Svelte 框架的獨特之處，讓我們趁熱打鐵，做一個小項目來感受使用 Svelte 進行開發的高效和樂趣~

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-EvEM9s7f-1605794924162)(http://qju0b2x8b.hd-bkt.clouddn.com/u=2751666851,2395317651&fm=15&gp=0.jpg)]

十分鐘開發讀書筆記

接下來，我們要開發一個讀書筆記，來記錄自己每日的學習內容。

先分析下需求，讀書筆記需要有如下基本功能：

添加讀書筆記

展示已添加的讀書筆記

刪除某一條讀書筆記

導出讀書筆記成 Markdown 格式的文件，并下載至本地

成品效果如下：

體驗地址：https://read-note.now.sh/

總共分為四步，順利的話，只用十分鐘就可以開發完成并部署上線~

1. 啟動模板項目

可以通過以下兩種方式下載 Svelte 的模板項目。

方式一

直接下載壓縮包，并手動解壓，地址：https://github.com/sveltejs/template/archive/master.zip

方式二

通過 npx 命令創建一個 Svelte 模板項目：

npx degit sveltejs/template svelte-app

下載模板到本地后，進入項目目錄，輸入命令安裝依賴：

npm install

Svelte 框架使用 Rollup 作為 JS 模塊打包工具（也是大佬寫的輪子），依賴安裝完成后，通過控制臺輸入命令，在本地啟動項目：

npm run dev

控制臺看到如下輸出，項目啟動成功：

瀏覽器訪問 localhost:5000，可以看到如下界面：

2. 開發界面

完成項目模板的下載和啟動后，開始進入讀書筆記界面的開發。

讀書筆記只有一個主頁面，先觀察頁面的布局，分為上下兩部分，上方是一張張相同樣式卡片組成的列表，下方是操作面板：

因此，我們只需要開發兩個組件，卡片 和 操作面板。然后將多張卡片組成列表放在主頁面上方，操作面板固定在主頁面底部。

在項目 src 目錄下新建幾個 .svelte 文件（Svelte 框架的頁面文件，App.svelte 為模板自帶的主頁面），此時目錄結構如下：

.svelte 文件的語法結構和 Vue 框架非常類似，由行為、頁面、樣式三部分組成，分別對應 JavaScript、HTML、CSS 代碼。一個標準的 .svelte 文件代碼如下：

<script>// 編寫網頁交互行為 </script><div><!-- 編寫頁面內容結構 --> </div><style>/* 編寫 CSS 樣式 */ </style>

2.1 開發卡片組件

讀書筆記的每張卡片都要有標題、內容和創建日期，還要給卡片編號，并給不同編號的卡片加上不同的顏色。當鼠標移到卡片上時，出現刪除按鈕。

打開 Card.svelte 文件，先在 script 標簽中用 JavaScript 定義幾個屬性變量（組件內唯一）和一個刪除函數：

<script>// 定義變量export let title; // 標題export let content; // 內容export let creationTime; // 創建日期export let index = 0; // 卡片序號// 刪除卡片function doDelete() { } </script>

然后編寫卡片的內容，先用一個根 div 標簽括起所有的內容，然后編寫標題、內容、創建時間的 div 標簽。在 Svelte 中，可以直接使用尖括號來輸出變量的值，使用 on:click 指令來綁定鼠標點擊事件：

<div class={`card bg-color-${index % 5}`}><div class="title">{title} <span class="del-btn" on:click={doDelete}>x</span></div><div class="content">{content}</div><div class="creationTime">{creationTime}</div> </div>

在 style 標簽中編寫 CSS 代碼，讓卡片變得美美噠：

<style>.card {padding: 1rem;margin: 1rem;color: #fff;border-radius: 0.5rem;}/* 省略... *//* 當鼠標移到卡片上，展示刪除按鈕 */.card:hover .del-btn {opacity: 1;} </style>

2.2 開發操作面板組件

操作面板包含兩個輸入框和兩個按鈕，用于添加卡片和導出筆記。

打開 AddCard.svelte 文件，和開發卡片一樣，先編寫 JavaScript，定義幾個屬性變量，以及 “添加” 和 “導出” 函數：

<script>// 在 src 目錄下新建 utils 工具類，編寫獲取當前日期的函數import {getNowDateFormat} from "./utils";// 定義變量let title = ''; // 標題let content = ''; // 內容// 添加卡片function doAdd() { }// 導出筆記function doExport() { } </script>

然后編寫操作面板的內容，Svelte 通過 bind:value 指令實現表單數據的雙向綁定：

<div class="add-card"><div class="input-wrapper"><input class="input-title" type="text" placeholder="輸入標題" bind:value={title} /><textarea class="input-content" placeholder="輸入內容" bind:value={content}></textarea></div><button class="add-btn" on:click={doAdd}>添加</button><button class="export-btn" on:click={doExport}>導出</button> </div>

最后編寫 CSS 代碼，讓操作面板變得美美噠~ 此處使用 Flex 布局：

<style>/* 操作面板固定在頁面底部 */.add-card {position: fixed;bottom: 0;left: 0;width: 100%;box-sizing: border-box;padding: 1rem;background-image: linear-gradient(135deg, #FEC163 10%, #DE4313 100%);display: flex;}.input-wrapper {flex: 4; /* 使用 Flex 布局 */}/* 省略... */.add-btn, .export-btn {flex: 1;margin-left: 1rem;color: #666;} </style>

2.3 將組件放入主頁面

開發完卡片和操作面板組件后，只需要將這些組件丟到 Svelte 模板項目默認生成的主頁面 App.svelte 中，在 script 標簽中通過 import 關鍵字引入組件：

<script>import Card from "./Card.svelte";import AddCard from "./AddCard.svelte"; </script>

在 div 標簽中，通過 {# each ... } {/each} 循環語句實現卡片列表，直接通過組件名引入組件：

<div id="app">{#each $cards as card, i}<Card {...card} index={i}/>{/each}<AddCard/> </div>

細心的小伙伴可能會好奇，上述代碼第 2 行的 $cards 變量是從哪兒來的呢？不著急，稍后揭曉~

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-WIvEMocd-1605794924170)(http://qju0b2x8b.hd-bkt.clouddn.com/u=1659724492,1719960849&fm=26&gp=0.jpg)]

大功告成！讀書筆記的界面開發好了，但這時，所有的按鈕都沒有任何作用，下面我們來給讀書筆記添加功能。

3. 實現功能

不知道大家有沒有發現，我們要做的讀書筆記，其實就是個簡單的增刪改查項目！

既然是增刪改查，那肯定要有地方存儲數據，記錄數據的變化。通常數據是存在數據庫中的，通過向后端發出請求來操作和查詢數據庫中的數據。

但這里我們只是一個前端項目，沒有數據庫，怎么辦呢？可以直接使用 Svelte 自帶的狀態管理 API 來實現本地數據管理，無需引入任何新的依賴！

3.1 管理卡片數據

在項目 src 目錄下新建 store.js，作為數據管理文件，此時目錄結構如下：

在 store.js 文件中通過 writable 函數定義 cards 可寫變量：

import {writable} from "svelte/store";export const cards = writable([]);

定義好之后，cards 已經被 Svelte 框架管理了，可以直接把 cards 當做一個全局變量來使用。

在主頁面中引入 cards，并通過循環語句展示已添加的卡片列表。注意，想要使用狀態變量，要在變量名前添加 $ 符號。此時的主頁面文件 App.svelte 內容如下：

<script>import {cards} from './store'; // 引入 cardsimport Card from "./Card.svelte";import AddCard from "./AddCard.svelte"; </script><div id="app">{#each $cards as card, i}<Card {...card} index={i}/>{/each}<AddCard/> </div>

完成了 cards 的展示后，我們依次實現 cards 的添加和刪除吧~

3.2 添加卡片

點擊操作面板的添加按鈕，可以添加卡片。須實現 AddCard.svelte 文件的添加函數：

<script>// 引入狀態import {cards} from './store';import {getNowDateFormat} from "./utils";let title = '';let content = '';function doAdd() {// 校驗if (!title || !content) {alert('標題和內容必須都填！');return;}// 更新卡片狀態，追加一個新卡片cards.update(item => {item = [...item, {title,content,creationTime: getNowDateFormat()}];return item;})} </script>

上述文件第 15 行起，通過調用 cards 狀態變量的 update 函數，在原數組后追加一個元素，實現新增卡片。

3.3 刪除卡片

點擊卡片上的刪除按鈕，可以刪除當前卡片。須實現 Card.svelte 文件的刪除函數：

<script>import {cards} from "./store";// 刪除卡片function doDelete() {cards.update(item => {item.splice(index, 1);return item;})} </script>

刪除卡片和添加卡片操作類似，都是調用 cards 狀態變量的 update 函數，對原數組進行處理，并使用處理后的數組進行更新。

3.4 導出筆記

點擊操作面板上的導出按鈕，將已添加的卡片導出為 Markdown 格式的筆記文件，實現比較簡單。

首先安裝 file-saver 庫，依賴這個庫實現下載功能：

npm i file-saver

實現 AddCard.svelte 文件中的導出函數，將 cards 狀態數組保存為文件：

<script>import {cards} from './store';// 引入 file-saverimport {saveAs} from 'file-saver';// 導出為 read_note.md 文件function doExport() {const texts = [];// 讀取 cards 狀態數組for (const card of $cards) {let text = `### ${card.title}\n${card.content}\n${card.creationTime}\n`;texts.push(text);}// 寫入文件const blob = new Blob(texts, {type: "text/plain;charset=utf-8"});saveAs(blob, "read_note.md");} </script>

大功告成！一個精美的讀書筆記就開發完成啦！

3.5 改進

到目前為止，我們只實現了讀書筆記最基本的功能，但這個筆記還存在很多問題：

其實目前我們還沒有給卡片添加不同的顏色，大家可以在項目中的 public/global.css 文件添加顏色樣式。

關掉網頁后，已經添加的卡片會消失，可以通過瀏覽器的 Cookie 實現持久化存儲，卡片更新時，保存到 Cookie 中，再次打開網站時，從 Cookie 恢復卡片數據，并保存為狀態。

感興趣地讀者可以試著實現上述改進功能，還可以發揮自己的想象，給讀書筆記添加新功能哦~

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-75Sl3IJD-1605794924173)(http://qju0b2x8b.hd-bkt.clouddn.com/u=1345032634,3216971394&fm=26&gp=0.jpg)]

4. 發布上線

本地開發完成后，怎么將網站發布，讓所有人都能看到呢？

首先通過命令打包項目：

npm run build

會在 public 目錄下生成 bundle.js 文件：

此時的 public 目錄結構如下：

怎么發布網站到線上呢？先買臺服務器？

大可不必，可以使用 Vercel。

Vercel 是免費網站托管平臺，可以幫我們部署網站，并生成可訪問的網址。先通過 npm 安裝 Vercel：

npm install -g vercel

安裝完成后，進入 public 目錄，通過 vercel 命令發布網站：

cd public vercel deploy --name read-note

發布成功，會得到一個網址，打開就能看到精美的讀書筆記網站啦！

在網站中啟用開發者工具（按 F12），能夠看到網頁文件的加載信息，發現整個讀書筆記網站大小才 16 KB！

簡直不講武德啊！

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-uDyOHXgu-1605794924178)(http://qju0b2x8b.hd-bkt.clouddn.com/timg%20(27)].jpg)

億點看法

翻閱了一些論壇，發現大家對于 Svelte 框架的看法褒貶不一。

有的朋友認為 Svelte 為了減少幾十 KB 的體積，而放棄了原本的 runtime 設計和完善的生態，得不償失。畢竟隨著網絡和多媒體的發展，如今一張圖片的大小都要幾百 KB 了，一個頁面可能好幾 MB，還有必要糾結那點大小么？

也有的朋友認為 Svelte 的強大之處正是在于沒有使用 runtime，可以像原生 JS 一樣融合進任何框架和組件，非常適合微前端架構。

我覺得，姑且不論 Svelte 現在的生態怎么樣、有沒有人用，首先作者這種打破思維定式、返璞歸真的勇氣和探索精神值得我們肯定和學習。

脫離業務場景的技術選型都是耍流氓，也許在某些配置較低、網絡較差的小設備中，減小幾十 KB 的包大小真的很有必要！這時，我們可能會摒棄那些重量級的框架，重回原生的懷抱。

Svelte 框架在保證高效極簡開發體驗的同時，保留了原生項目的輕小體積和高性能，這是能夠吸引開發者的爽點。只是目前，Svelte 這種無 Virtual DOM 的設計在生產項目中究竟能發揮多大的優勢、在大型應用中的性能到底如何，還有待觀察，需要更多的打磨和企業的實際檢驗。

相信未來，Svelte 的開發者、建設者和布道者會越來越多，未來可期！

畢竟，多一種技術選型何樂而不為呢？

如果想要進一步學習 Svelte，推薦直接使用官方提供的學習教程，簡潔清晰、容易上手，還能使用在線編輯器進行實時練習和調試。

點擊 鏈接 一鍵傳送至 Svelte 官方學習教程哦~

總結

以上是生活随笔為你收集整理的实战 | 尝鲜 Svelte 前端框架，开发读书笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。