Svelte 入門指南 - 簡短教程

如何開始使用 Svelte

自從我開始使用 Hugo 作為靜態網站生成器創建網站以來，我喜歡這種在網絡上發布的方式，相對於使用動態生成頁面的 CMS，這是我過去習慣的方式。

Svelte 是一個 JavaScript 框架，它給我一種相同的感覺。與 React、Vue、Angular 和其他框架相比，使用 Svelte 構建的應用是事先編譯的，您的網站訪問者不需要網絡中的框架和庫代碼，結果是體驗更順暢，消耗帶寬更少，一切都感覺更快和更輕量級。

就像 Hugo 一樣，在部署時，Svelte 消失了，你只得到純 JavaScript。

但讓我們跳轉到文章的主要內容。如何開始使用 Svelte。

需要安裝 Node.js。如果你還沒有安裝，請參考我的如何安裝 Node.js文章！

並確保它是最新版本的（如何更新 Node.js）。

Node 安裝了npx命令，這是一種運行 Node 命令的便捷方式。特別是我們將運行以下命令：

1	npx degit sveltejs/template firstapp

這將下載並運行degit 命令，它接下來會下載位於https://github.com/sveltejs/template的 Svelte 項目模板的最新代碼到firstapp文件夾中。

現在進入 firstapp 文件夾，運行 npm install 下載模板的其他依賴項。在撰寫本文時，這些依賴項如下：

"npm-run-all"
"rollup"
"rollup-plugin-commonjs"
"rollup-plugin-livereload"
"rollup-plugin-node-resolve"
"rollup-plugin-svelte"
"rollup-plugin-terser"
"svelte"

如您所見，其中包括 Svelte 核心，還有 Rollup（一個替代 Webpack 的工具）及其一些插件。此外還有 npm-run-all，它是一個用於並行或串行運行多個 npm 腳本的 CLI 工具。

現在，我們可以運行開發模式下的 Svelte 網站，運行以下命令：

1	npm run dev

這將在默認情況下在 localhost 的 5000 端口啟動應用程序：

CLI

如果您在瀏覽器中輸入這個地址，您將看到一個“Hello world！”的示例：

Browser

現在，您可以在您最喜歡的編輯器中打開代碼。src 文件夾包含所有您需要調整應用程序的內容： main.js 文件：

Editor

此文件是入口點，它初始化 App 組件。該組件在 App.svelte 中定義，是一個單文件組件：

<script>
export let name;
</script>

<style>
h1 {
color: purple;
}
</style>

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

如果您熟悉VUE.js，這是一個相似的概念。您可以在一個 .svelte 文件中為每個組件定義標記、樣式和 JavaScript。
tags: [“Svelte”, “JavaScript”, “Framework”]