Svelte入门-简短教程

如何开始使用Svelte

自从我开始使用Hugo作为创建网站的静态网站生成器以来,与过去使用CMS动态生成页面的CMS相比,我已经越来越喜欢这种在Web上发布的方法。

Svelte是一个给我同样感觉的JavaScript框架。与React,Vue,Angular和其他框架相比,使用Svelte构建的应用程序是已编译事先,不必为网站访问者提供框架和库代码,因此,所有体验的结果都更加流畅,占用的带宽更少,并且一切感觉更快,更轻便。

与Hugo一样,Hugo会在部署时消失并生成纯HTML,Svelte也会消失,而您所获得的只是纯JavaScript。

但是,让我们跳到本文的重点。如何开始使用Svelte。

您需要安装Node.js。看看我的如何安装Node.js发布(如果您还没有的话)!

并确保它是最新版本(如何更新Node.js)。

节点安装npx命令,这是运行Node命令的便捷方法。特别是,我们将运行以下代码:

npx degit sveltejs/template firstapp

这将下载并运行degit命令,依次下载位于以下位置的Svelte项目模板的最新代码https://github.com/sveltejs/template, 进入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"

As you can see, it’s the Svelte core, plus Rollup (a Webpack alternative) and some of its plugins. Plus npm-run-all, a CLI tool that is used to run multiple npm scripts in parallel, or sequential.

We’re now ready to run our Svelte site in development mode, by running

npm run dev

This will start the app on localhost, on port 5000, by default:

CLI

If you point your browser there, you’ll see the “Hello world!” example:

Browser

You’re now ready to open the code in your favorite editor. The src folder contains all you need to tweak the app: the main.js file:

Editor

This file is the entry point and in this case initializes the App component, which is defined in App.svelte, a single file component:

<script>
export let name;
</script>

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

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

If you are familiar with Vue.js, it’s a similar concept. You define the markup, the style and the JavaScript for each component in a single .svelte file.

Download my free Svelte Handbook


More svelte tutorials: