超简单！Svelte 前端框架入门指南（附实战示例）
原创
超简单！Svelte 前端框架入门指南（附实战示例）
原创
如果你刚接触前端开发，可能会被 React、Vue 这些热门框架搞得晕头转向。别担心，今天我要给你介绍一个超容易上手的前端框架——Svelte！它就像前端世界里的“魔法棒”，能让你轻松快速地构建出酷炫的网页应用。
一、Svelte 是什么？
Svelte 是一个全新的前端框架，和 React、Vue 不同，它没有复杂的虚拟 DOM 概念。Svelte 会在构建时把组件编译成高效的 JavaScript 代码，直接操作 DOM，这样就能让你的应用运行得更快、更流畅。简单来说，Svelte 就像是一个聪明的“翻译官”，把你写的组件代码转换成浏览器能直接理解的代码指令。
官方文档：Svelte中文文档
二、为什么选择 Svelte？
1. 简单易学
Svelte 的语法非常简洁，没有太多复杂的概念和配置。对于前端小白来说，如果你对 HTML、CSS 和 JavaScript 有一定的基础的话，就很容易就能理解并上手。
2. 性能出色
由于 Svelte 在构建时就完成了大部分工作，生成的代码非常高效，所以应用运行起来速度很快，响应也很及时。
3. 体积小巧
使用 Svelte 构建的应用体积相对较小，网页加载速度更快，用户体验会更好一些。
三、安装与配置
1. 安装 Node.js
Svelte 的开发需要 Node.js 环境，你可以从Node.js 官网下载并安装适合你操作系统的版本。安装完成后，打开命令行工具，输入 node -v 和 npm -v，如果能看到版本号，说明安装成功啦。
2. 创建 Svelte 项目
打开命令行工具，进入你想要创建项目的目录，然后运行以下命令：
npx degit sveltejs/template svelte-app
cd svelte-app
npm install
命令解释：
npx degit sveltejs/template svelte-app：从 Svelte 的模板仓库中克隆一个项目模板到svelte-app文件夹。cd svelte-app：进入项目文件夹。npm install：安装项目所需的依赖包。
最终项目结构如下：
3. 启动开发服务器
安装完依赖后，运行以下命令启动开发服务器：
npm run dev命令行工具会显示一个本地地址（通常是 http://localhost:8080），在浏览器中打开这个地址，你就能看到 Svelte 项目的默认页面啦。运行界面如下：
四、Svelte 基础语法
1. 组件结构
一个 Svelte 组件就是一个 .svelte 文件，它由三部分组成：
- 脚本部分：使用
<script>标签包裹，用于定义组件的逻辑。 - 模板部分：直接写 HTML 代码，用于定义组件的结构。
- 样式部分：使用
<style>标签包裹，用于定义组件的样式。
下面是一个简单的 Svelte 组件示例 App.svelte：
<script>
let name = '世界';
</script>
<main>
<h1>Hello {name}!</h1>
</main>
<style>
main {
text-align: center;
padding: 1em;
max-width: 800px;
margin: 0 auto;
}
h1 {
color: #ff3e00;
}
</style>代码说明：
脚本部分：定义了一个变量 name，初始值为 '世界'。
模板部分：使用了 {name} 来引用脚本部分定义的变量，将变量的值显示在页面上
样式部：分为 main 和 h1 元素添加了一些基本的样式
2. 响应式数据
Svelte 可以很方便地实现数据的响应式更新。当数据发生变化时，页面会自动重新渲染。下面是一个响应式数据的示例：
<script>
let count = 0;
// 计数函数
function increment() {
count += 1;
}
</script>
<main>
<button on:click={increment}>
点击计数: {count}
</button>
</main>
<style>
button {
font-size: 1.2em;
padding: 0.5em 1em;
background-color: #ff3e00;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
五、实战示例：简单的待办事项应用
现在，我们来用 Svelte 制作一个简单的待办事项应用，让你更好地掌握 Svelte 的使用。
1. 创建组件文件
在项目的 src 文件夹下创建一个新的文件 TodoApp.svelte。
2. 编写组件代码
<script>
let newTodo = '';
let todos = [];
function addTodo() {
if (newTodo.trim()!== '') {
todos = [...todos, { text: newTodo, completed: false }];
newTodo = '';
}
}
function toggleTodo(index) {
todos[index].completed =!todos[index].completed;
todos = [...todos];
}
function deleteTodo(index) {
todos = todos.filter((_, i) => i!== index);
}
</script>
<main>
<h1>待办事项</h1>
<input
type="text"
bind:value={newTodo}
on:keyup={(e) => e.key === 'Enter' && addTodo()}
placeholder="输入待办事项"
/>
<button on:click={addTodo}>添加</button>
<ul>
{#each todos as todo, index}
<li
class:completed={todo.completed}
on:click={() => toggleTodo(index)}
>
{todo.text}
<button on:click|stopPropagation={() => deleteTodo(index)}>删除</button>
</li>
{/each}
</ul>
</main>
<style>
main {
text-align: center;
padding: 1em;
max-width: 800px;
margin: 0 auto;
}
h1 {
color: #ff3e00;
}
input {
padding: 0.5em;
margin-right: 0.5em;
}
button {
padding: 0.5em 1em;
background-color: #ff3e00;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 0.5em;
margin: 0.5em 0;
background-color: #f4f4f4;
border-radius: 4px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.completed {
text-decoration: line-through;
color: #888;
}
</style>运行效果如下
3. 更新 App.svelte 文件
将 App.svelte 文件的内容替换为以下代码，引入我们刚刚创建的 TodoApp 组件：
<script>
import TodoApp from './TodoApp.svelte';
</script>
<main>
<TodoApp />
</main>
<style>
main {
text-align: center;
padding: 1em;
max-width: 800px;
margin: 0 auto;
}
</style>4. 查看效果
保存所有文件后，在命令行工具中运行 npm run dev，然后在浏览器中打开 ，就可以看到简单的待办事项应用。你可以输入待办事项，点击添加按钮添加到列表中，点击列表项可以标记为完成或未完成，点击删除按钮可以删除待办事项。具体界面效果如下：
六、总结
通过以上内容介绍，相信大家已经了解了 Svelte 是什么，为什么选择它，以及它的基础语法和实战应用。Svelte 是一个非常适合前端小白学习的新型前端框架。它具有易上手、性能出色等优点，感兴趣的前端朋友可以亲自试一试！大家如果在使用过程中遇到问题的话，欢迎在评论区留言交流哦！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
