Svelte 入门指南：HTML、CSS 和 JavaScript 的基础使用

1. Svelte 简介

Svelte 是一种用于构建用户界面的现代 JavaScript 框架。与传统的框架（如 React、Vue 等）不同，Svelte 在编译阶段将组件代码转换为高效的原生 JavaScript 代码，而不是在运行时使用虚拟 DOM 来进行操作。这使得 Svelte 应用在运行时性能出色，同时保持代码简洁和易于理解。

2. 环境搭建

在开始使用 Svelte 进行开发之前，我们需要搭建开发环境。首先，确保你已经安装了 Node.js 和 npm（Node Package Manager）。

2.1 创建新项目

我们可以使用 create - svelte 工具来快速创建一个新的 Svelte 项目。在终端中运行以下命令：

npm create svelte@latest my - svelte - app
cd my - svelte - app
npm install
npm run dev

上述命令首先使用 npm create svelte@latest 创建一个新的 Svelte 项目，项目名称为 my - svelte - app。然后进入项目目录，安装项目依赖，并启动开发服务器。

2.2 项目结构

创建好的 Svelte 项目结构如下：

my - svelte - app
├── node_modules
├── public
│   ├── build
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── app.css
│   ├── app.js
│   ├── components
│   │   └── Button.svelte
│   └── main.js
├── .gitignore
├── package.json
├── README.md
└── svelte.config.js

public 目录：包含项目的静态文件，如 index.html 是应用的入口 HTML 文件。
src 目录：存放项目的源代码，app.css 是全局样式文件，app.js 是应用的主组件，components 目录用于存放自定义组件，main.js 用于初始化 Svelte 应用。
package.json：记录项目的依赖和脚本等信息。
svelte.config.js：Svelte 项目的配置文件。

3. Svelte 中的 HTML 使用

在 Svelte 中，HTML 用于定义组件的结构。Svelte 组件文件通常以 .svelte 为扩展名，它融合了 HTML、CSS 和 JavaScript。

3.1 基本 HTML 结构

以下是一个简单的 Svelte 组件示例：

<!-- Button.svelte -->
<button>Click me</button>

这就是一个最基本的按钮组件，与普通 HTML 按钮没有太大区别。但在 Svelte 组件中，我们可以结合 JavaScript 和 CSS 来实现更多功能。

3.2 动态内容绑定

Svelte 允许我们将 JavaScript 变量绑定到 HTML 元素上。例如，我们可以根据一个变量的值来显示不同的文本：

<script>
    let message = 'Hello, Svelte!';
</script>

<p>{message}</p>

在上述代码中，{message} 就是将 message 变量的值插入到 HTML 中。如果 message 的值发生变化，HTML 中的文本也会自动更新。

3.3 条件渲染

我们可以使用 if 指令来根据条件渲染 HTML 元素。例如：

<script>
    let isLoggedIn = true;
</script>

{#if isLoggedIn}
    <p>Welcome, user!</p>
{:else}
    <p>Please log in.</p>
{/if}

这里使用 {#if} 开始条件块，{:else} 表示否则的情况，{/if} 结束条件块。如果 isLoggedIn 为 true，则显示 Welcome, user!，否则显示 Please log in.。

3.4 列表渲染

Svelte 提供了 each 指令来渲染列表。假设我们有一个数组：

<script>
    let fruits = ['apple', 'banana', 'cherry'];
</script>

<ul>
    {#each fruits as fruit}
        <li>{fruit}</li>
    {/each}
</ul>

在这个例子中，{#each fruits as fruit} 表示对 fruits 数组中的每个元素进行迭代，fruit 是每次迭代的当前元素。我们将每个水果名称渲染为列表项。

4. Svelte 中的 CSS 使用

Svelte 中的 CSS 同样在 .svelte 文件中定义，它具有局部作用域，即组件内定义的 CSS 只影响该组件，不会影响其他组件。

4.1 基本样式定义

<!-- Button.svelte -->
<button>Click me</button>

<style>
    button {
        background - color: blue;
        color: white;
        padding: 10px 20px;
        border: none;
        border - radius: 5px;
    }
</style>

上述代码为按钮定义了基本样式，使其具有蓝色背景、白色文字、内边距和圆角。

4.2 动态样式绑定

我们可以根据 JavaScript 变量来动态改变样式。例如：

<script>
    let isActive = false;
</script>

<button class:active={isActive}>Click me</button>

<style>
    button {
        background - color: blue;
        color: white;
        padding: 10px 20px;
        border: none;
        border - radius: 5px;
    }

   .active {
        background - color: green;
    }
</style>

这里使用 class:active={isActive} 来动态绑定 active 类。当 isActive 为 true 时，按钮会应用 .active 类的样式，背景颜色变为绿色。

4.3 全局样式

如果需要定义全局样式，可以在 src/app.css 文件中进行定义。例如：

body {
    font - family: Arial, sans - serif;
    margin: 0;
    padding: 0;
}

这些样式会应用到整个应用中。

5. Svelte 中的 JavaScript 使用

JavaScript 在 Svelte 组件中用于定义逻辑、处理数据和响应用户交互。

5.1 变量和函数定义

在 script 标签中，我们可以定义变量和函数。例如：

<script>
    let count = 0;

    function increment() {
        count++;
    }
</script>

<button on:click={increment}>Increment ({count})</button>

这里定义了一个 count 变量和一个 increment 函数。按钮的 on:click 事件绑定到 increment 函数，每次点击按钮，count 就会增加 1，并显示在按钮上。

5.2 响应式声明

Svelte 具有响应式声明的特性。当一个变量发生变化时，与之相关的 DOM 会自动更新。例如：

<script>
    let name = 'John';
    let greeting = `Hello, ${name}!`;

    function changeName() {
        name = 'Jane';
    }
</script>

<p>{greeting}</p>
<button on:click={changeName}>Change Name</button>

这里 greeting 依赖于 name，当 name 通过 changeName 函数改变时，greeting 也会自动更新，页面上显示的问候语也会随之改变。

5.3 生命周期函数

Svelte 提供了一些生命周期函数，如 onMount、beforeUpdate、afterUpdate 等。

5.3.1 onMount onMount 函数在组件首次渲染到 DOM 后执行。例如：

<script>
    import { onMount } from'svelte';

    onMount(() => {
        console.log('Component has been mounted.');
    });
</script>

在这个例子中，当组件挂载到 DOM 后，会在控制台打印 Component has been mounted.。

5.3.2 beforeUpdate beforeUpdate 函数在组件更新之前执行，例如在数据变化导致重新渲染之前。

<script>
    import { beforeUpdate } from'svelte';
    let count = 0;

    beforeUpdate(() => {
        console.log('Component is about to update.');
    });

    function increment() {
        count++;
    }
</script>

<button on:click={increment}>Increment ({count})</button>

每次点击按钮增加 count 时，在组件重新渲染之前，会在控制台打印 Component is about to update.。

5.3.3 afterUpdate afterUpdate 函数在组件更新完成后执行。

<script>
    import { afterUpdate } from'svelte';
    let count = 0;

    afterUpdate(() => {
        console.log('Component has been updated.');
    });

    function increment() {
        count++;
    }
</script>

<button on:click={increment}>Increment ({count})</button>

每次按钮点击导致组件更新后，会在控制台打印 Component has been updated.。

6. 组件间通信

在大型应用中，组件之间需要进行通信。Svelte 提供了几种方式来实现组件间通信。

6.1 父传子（通过 props）

父组件可以通过 props 向子组件传递数据。

子组件（Child.svelte）

<script>
    export let message;
</script>

<p>{message}</p>

这里使用 export let 声明了一个 message 属性，用于接收父组件传递的数据。

父组件（Parent.svelte）

<script>
    import Child from './Child.svelte';
    let text = 'Hello from parent!';
</script>

<Child message={text} />

在父组件中，引入 Child.svelte 组件，并将 text 变量作为 message 属性传递给子组件。

6.2 子传父（通过事件）

子组件可以通过触发事件向父组件传递数据。

子组件（Child.svelte）

<script>
    import { createEventDispatcher } from'svelte';
    const dispatch = createEventDispatcher();
    function sendData() {
        const data = 'Data from child';
        dispatch('custom - event', data);
    }
</script>

<button on:click={sendData}>Send Data to Parent</button>

这里使用 createEventDispatcher 创建一个事件分发器，sendData 函数触发一个名为 custom - event 的自定义事件，并传递数据。

父组件（Parent.svelte）

<script>
    import Child from './Child.svelte';
    function handleCustomEvent(event) {
        console.log('Received data from child:', event.detail);
    }
</script>

<Child on:custom - event={handleCustomEvent} />

在父组件中，通过 on:custom - event 监听子组件触发的 custom - event 事件，并在 handleCustomEvent 函数中处理接收到的数据。

6.3 共享状态管理（通过 stores）

对于多个组件之间共享的数据，可以使用 Svelte 的 stores。

创建一个 store（store.js）

import { writable } from'svelte/store';

export const countStore = writable(0);

这里使用 writable 创建了一个可写的 store，初始值为 0。

使用 store 的组件（Component1.svelte）

<script>
    import { countStore } from './store.js';
    import { subscribe } from'svelte/store';

    let count;
    const unsubscribe = subscribe(countStore, (value) => {
        count = value;
    });

    function increment() {
        countStore.update((n) => n + 1);
    }
</script>

<p>Count: {count}</p>
<button on:click={increment}>Increment</button>

在 Component1.svelte 中，通过 subscribe 订阅 countStore 的变化，并在 increment 函数中使用 update 方法更新 countStore 的值。

另一个使用 store 的组件（Component2.svelte）

<script>
    import { countStore } from './store.js';
    import { subscribe } from'svelte/store';

    let count;
    const unsubscribe = subscribe(countStore, (value) => {
        count = value;
    });
</script>

<p>Count in Component2: {count}</p>

Component2.svelte 同样订阅 countStore，当 countStore 的值发生变化时，两个组件中的 count 都会更新。

7. 路由

在单页应用（SPA）中，路由是非常重要的功能。Svelte 可以使用 svelte - routing 库来实现路由功能。

7.1 安装路由库

首先，在项目中安装 svelte - routing：

npm install svelte - routing

7.2 配置路由

假设我们有两个页面组件 Home.svelte 和 About.svelte。

main.js

import { Router, Route } from'svelte - routing';
import Home from './src/Home.svelte';
import About from './src/About.svelte';
import App from './src/App.svelte';

const app = new Router({
    target: document.body,
    routes: [
        {
            path: '/',
            component: Home
        },
        {
            path: '/about',
            component: About
        }
    ]
});

export default app;

这里定义了两个路由，根路径 '/' 对应 Home 组件，'/about' 路径对应 About 组件。

7.3 导航

在 App.svelte 中，我们可以添加导航链接：

<script>
    import { Link } from'svelte - routing';
</script>

<nav>
    <Link href="/">Home</Link>
    <Link href="/about">About</Link>
</nav>

{#if $page}
    {$page.component}
{/if}

Link 组件用于创建导航链接，$page 是路由当前匹配的页面信息，通过 {$page.component} 渲染当前页面组件。

8. 构建和部署

当我们完成项目开发后，需要将其构建并部署到服务器上。

8.1 构建项目

在项目根目录下运行以下命令进行构建：

npm run build

构建后的文件会生成在 public/build 目录中。

8.2 部署

部署方式有多种，常见的有：

静态文件服务器：可以使用如 serve 这样的工具来启动一个静态文件服务器，将 public 目录作为根目录。

npm install -g serve
serve public

云服务：如 Vercel、Netlify 等，它们可以直接从你的代码仓库中部署 Svelte 项目，通常只需要将项目推送到 GitHub 等代码托管平台，然后在云服务平台上进行简单配置即可。

通过以上步骤，你就可以全面掌握 Svelte 中 HTML、CSS 和 JavaScript 的基础使用，并构建出功能丰富的前端应用。无论是小型项目还是大型应用，Svelte 的简洁性和高效性都能为开发带来极大的便利。希望这篇入门指南能帮助你快速上手 Svelte 开发。