原文出處：https://dev.to/vintharas/discovering-svelte-getting-started-with-svelte-writing-a-pomodoro-technique-app-2lph
開始使用 Svelte
在 svelte.dev 中的 Svelte REPL 中進行試玩
使用 svelte 模板從頭開始建立應用程式
儘管我認為通讀教程對於學習 Svelte 的語法和可用的東西確實很有幫助，但我認為學習某些東西的最佳方法是在盡可能接近它的環境中實際操作會在現實世界中開發一個 Svelte 應用程式。 你需要自己努力解決問題才能真正學到東西。
建立一個新專案
我們使用 degit（也是由 Svelte 的建立者 Rich Harris 編寫的專案腳手架工具）生成一個新專案。類型：
$ npx degit sveltejs/template il-pomodoro
這將在 il-pomodoro 目錄中建立一個全新的 Svelte 專案。我們跳進去，安裝依賴項並執行開發伺服器：
# Jump in
$ cd il-pomodoro
# Install the dependencies
$ npm install
# Run the development server
$ npm run dev
現在我們在 localhost:5000 上打開瀏覽器，讓我們看看我們得到了什麼……
塔達！測試成功！
設置你的編輯器
Svelte 是一個編譯器優先的框架，它編譯代表 Svelte 元件的 .svelte 文件來建置 Web 應用程式。我在教程中看到的那個特殊的 .svelte 擴展和非 Web 標準語法告訴我，我需要在我的編輯器中提供一些額外的支持來處理 Svelte。 Svelte 博客有一篇關於如何設置編輯器以使用 Svelte 的好文章。我通常使用 Vim 或 VSCode，所以讓我們設置這兩個編輯器以使用 Svelte。
設置 VSCode 以使用 Svelte
對於 VSCode，有 svelte-code 插件，它支持 .svelte 語法突出顯示、診斷、自動完成和 更多。
設置 Vim 以使用 Svelte
對於 Vim，設置你的編輯器文章 沒有提供很多支持。它基本上告訴您將 .svelte 文件的文件類型更改為 HTML。經過一番挖掘，我發現了一些插件，它們可以讓你在 Vim 中獲得更好的 Svelte 體驗，並達到 VSCode 的標準：
vim-svelte 為 .svelte 文件提供語法高亮和縮進
coc-svelte 通過連接到 Svelte LSP 1 為 Svelte 開發提供類似 IDE 的高級支持。這是 coc.nvim 自動補全插件（恰好是我最喜歡的 vim 補全插件）的擴展。
好的，現在我們已經設置好了編輯器，讓我們仔細看看我們的新 Svelte 專案。
檔案結構
我們在編輯器中打開 il-pomodoro 文件夾，我們會看到一堆文件和文件夾：
一個
src文件夾，其中包含 Svelte hello world 應用程式的源程式碼一個
public文件夾，在 Svelte 編譯器編譯和處理後將包含我們的 Web 應用程式rollup.config.js，其中包含我們的捆綁器 (rollup) 的配置。 Rollup 負責使用 Svelte 處理我們的源程式碼文件，以生成可以在瀏覽器中執行的開發和生產包。
對於初學者來說非常有趣的部分發生在 src 文件夾中，所以我們接下來要看的地方。該文件夾僅包含兩個文件：
App.svelte這是我們應用程式的根元件main.js，其中包含用於初始化我們的應用程式的引導程式碼
作為我們應用程式入口點的文件是“main.js”：
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
name: 'world'
}
});
export default app;
這會建立一個新的 Svelte App 元件，並將其附加到 document.body，並使用一個名為 title 的屬性，其值為 world。
讓我們看看 App 到底是什麼：
<script>
export let name;
</script>
<main>
<h1>Hello {name}!</h1>
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>
<style>
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
}
h1 {
color: #ff3e00;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}
@media (min-width: 640px) {
main {
max-width: none;
}
}
</style>
我懂了！所以 Svelte 元件是一些可重用的 UI，它封裝了元件的標記 (HTML)、它的行為（<script> 標籤內的 JavaScript）及其外觀和感覺（<style> 標籤內的 CSS） .涼爽的！這就說得通了。
如果我們回到標記中，我們可以理解當我們將它指向 localhost:5000 時我們在瀏覽器中看到的內容：
<main>
<h1>Hello {name}!</h1>
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>
prop name 在實例化時傳遞給元件，並保存在該 name 變數中：
<script>
export let name;
</script>
然後傳播到元件的標記，並呈現在我們在瀏覽器中看到的“h1”標籤內。涼爽的！有點奇怪但熟悉的“export let name”語法必須是Svelte 元件將其 API 定義為 props 的方式。
加入標題
讓我們開始修補一些簡單的東西，比如為應用程式的第一個視圖加入標題並將其綁定到一些資料。初始模板給了我如何做到這一點的提示。我只需要向我的元件加入一個新變數以包含該標題。因為我在原始模板中沒有用到 name 變數，所以我將替換它：
<script>
export let title
</script>
並更新 main.js 以注入我的應用程式的標題：
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
title: 'il Pomodoro'
}
});
export default app;
再想一想，我真的不需要將該變數公開為道具。我們不希望此元件的用戶更改此標題，因此我們將其保留為元件內部的一部分。
讓我們重寫我們的 App 元件來執行此操作：
<script>
let title = "il Pomodoro";
</script>
最後，我將更新 HTML 模板以使用“title”而不是“name”：
<main>
<h1>{title}</h1>
</main>
搞定了！
任務列表
驚人的！讓我們繼續建立一個非常簡單的任務列表。由於這感覺像是一個完全獨立的責任，我們將把它放在它自己的元件中。
我建立了一個新文件“TaskList.svelte”來表示該新元件並加入了一些標記，以便在我從“App.svelte”中使用它時盡可能少地出錯：
<p>I'm a list of tasks</p>
我將它加入到 App.svelte：
<script>
let title = "il Pomodoro";
</script>
<main>
<h1>{title}</h1>
<TaskList />
</main>
<style>
/* styles omitted for sake of clarity. They'd be here. */
</style>
而且……沒用。嗯……我做錯了什麼……
VSCode 和瀏覽器都會警告我以下內容：
'TaskList' is not defined. svelte(missing-declaration)
這告訴我兩件事：
- 我的 vim 設置沒有按預期工作，因為我在編輯器中沒有收到錯誤（稍後要解決的問題），並且
2.我好像忘記導入元件了！
當然！所以我將它加入到“App.svelte”元件中：
<script>
let title = "il Pomodoro";
import TaskList from './TaskList.svelte';
</script>
<main>
<h1>{title}</h1>
<TaskList />
</main>
是的！**
現在讓我們加入一些任務。我今天的前 3 項任務是：
<script>
const tasks = [
"plan some fun trip with Teo",
"buy some flowers to my wife",
"write an article about Svelte"
];
</script>
現在我需要在列表中的螢幕上顯示這些內容。 Svelte 有一種特殊的方法來迭代模板內的列表：{#each} 塊。
它是這樣工作的：
<ul>
{#each tasks as task}
<li>{task}</li>
{/each}
</ul>
因此，我們遍歷 tasks 列表中的每個 task 並將其放入列表項 li 元素中。我們還從列表中刪除了點，因為它們看起來很糟糕：
<style>
ul {
list-style: none;
}
</style>
這就是我們得到的：
叮叮叮！ 番茄鐘結束了。得走了！我們將很快繼續使用更多 Svelte、交互式任務列表和番茄鐘。
尋找番茄鐘應用程式的源程式碼？
https://github.com/Vintharas/il-pomodoro-in-svelte
https://svelte.dev/repl/27164871e86d4ce1a9815489dc323500?version=3.16.7
到目前為止的一些思考
驚人的！這是開始使用 Svelte 的快速方法。到目前為止，這是我的印象：
svelte.dev 真的很棒。
交互式教程 有一個循序漸進的介紹，帶您了解 Svelte 的所有功能和重要概念。
Svelte playground 真的很酷，它可以讓你修改 Svelte 建立多文件應用程式，保存它們並與你的朋友和同事分享。
開發文件非常好 也非常全面並且有很多示例。將它們加入書籤並根據需要用作參考。
以上所有內容都提供了與 Svelte 的美妙初次接觸，當您第一次進入一個新的生態系統時，您會非常感激。
開始新專案的方式有點奇怪。我已經習慣了所有具有 CLI 的流行框架，使用
npx degit etc...來建立一個新專案有點令人困惑。但在前 5 秒的混亂之後，我只是執行命令並繼續我的生活。我對文本編輯器支持的第一印象並不好，例如，VSCode 沒有在 Svelte 模板內為我提供語句完成功能，而我希望它能工作（例如，允許我過濾“任務” `）。在我試用 Svelte 的短暫時間內，我沒有讓 Vim 設置正常工作。
使用 Svelte 本身就是一種非常好的體驗。
初次接觸時，感覺 Web 標準非常友好，並且一切如您所願。最小驚奇原則非常適用於 Svelte。
我喜歡 Svelte 元件的平面結構，以及它在 HTML 標記、Javascript (
<script>) 和 CSS (<style>) 中劃分元件的方式，這很有意義。樣板文件的數量幾乎可以忽略不計。在標記中註入資料很簡單
使用
export暴露 props 雖然不是標準的但很有意義並且很容易理解。我想知道為什麼 Svelte 使用
{#each tasks as task}而它可以使用{#for task of tasks}並減少學習 Svelte 的人的認知負荷。 （也就是需要學習更多的自定義語法）
這就是今天的全部內容！希望你喜歡這篇文章。保重並期待更多 Svelte 即將推出。
您是一位經驗豐富的 Svelte 用戶嗎？如果是這樣，請不要猶豫，告訴我我做事有多麼錯誤 :D 我很樂意聽取您的意見，我們都會因此變得更好。
在 Vim 中修復 Svelte
經過一些故障排除後，我意識到按照 Svelte 博客中的建議，我之前使用自動命令設置 Svelte 以將 .svelte 文件的文件類型更新為 html：
augroup svelte
au! BufNewFile,BufRead *.svelte set ft=html
augroup END
這意味著沒有應用 coc-vim 和 svelte 語法文件，因為它們需要 svelte 的文件類型。刪除自動命令後，一切都像在 Visual Studio Code 中一樣好用。哇哇！
[^1]：查看 這個超級古老的番茄工作法應用程式 我在開始進行 Web 開發的那一天使用 Knockout.js 編寫的。
-
LSP 代表語言伺服器協議。 （來自維基百科）它是一個開放的、基於 JSON-RPC 的協議，用於文本編輯器或 IDE 和提供編程語言特定功能的伺服器之間。該協議的目標是允許獨立於任何給定的編輯器或 IDE 實現和分發編程語言支持。 ↩︎
元件檔案
.svelte的格式，看起來跟 Vue 的.vue格式很像！轉換成本應該不高目前乍看之下，除了拿掉
Virtual DOM之外，不知道用起來差異比較大的地方有哪些