Vite 与 Svelte

引入 Svelte

Svelte 是一种新兴的前端框架，以其轻量级和高效性而受到开发者的青睐。Svelte 的核心理念是在构建时进行优化，而不是在运行时。这意味着当你编写 Svelte 应用程序时，编译器会将你的代码转换为高度优化的 Vanilla JavaScript，从而减少运行时所需的代码量。

安装 Svelte

在使用 Vite 构建 Svelte 项目之前，你需要安装 @sveltejs/vite-plugin-svelte 插件。这个插件允许你在 Vite 项目中使用 Svelte。你可以通过 npm 或 yarn 来安装它：

npm install @sveltejs/vite-plugin-svelte
# 或者
yarn add @sveltejs/vite-plugin-svelte

创建 Vite + Svelte 项目

为了创建一个基于 Vite 的 Svelte 项目，你可以使用 Vite 提供的脚手架工具。首先，确保你已经安装了 Node.js 和 npm/yarn。然后，你可以通过以下命令来创建一个新的项目：

npm create vite@latest my-svelte-app --template svelte
# 或者
yarn create vite my-svelte-app --template svelte

这将引导你完成项目的初始化过程。选择 Svelte 模板后，项目将会被创建并安装必要的依赖项。

配置 Vite

默认情况下，Vite 已经配置好了与 Svelte 的集成。但是，如果你需要自定义配置，可以编辑 vite.config.js 文件。例如，你可以在这里添加额外的 Svelte 编译选项或修改 Vite 的其他配置。

import { defineConfig } from 'vite';
import svelte from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()],
});

Svelte 组件基础

Svelte 组件是应用的核心部分。它们通常存储在 .svelte 文件中，并且可以包含 HTML、CSS 和 JavaScript。以下是一个简单的 Svelte 组件示例：

// www.javascriptcn.com code example
<!-- MyComponent.svelte -->
<script>
  export let name;
</script>

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

<style>
  main {
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 8px;
  }
</style>

在这个例子中，组件接收一个名为 name 的 prop，并将其显示在页面上。同时，我们还为组件添加了一些样式。

使用 Svelte 组件

在 Vite 项目中使用 Svelte 组件非常简单。你只需要像使用普通 HTML 标签一样使用它们即可。例如，在 App.svelte 文件中引入上面创建的 MyComponent.svelte 组件：

<!-- App.svelte -->
<script>
  import MyComponent from './MyComponent.svelte';
</script>

<Main>
  <MyComponent name="World" />
</Main>

这样，当应用程序运行时，MyComponent 就会被渲染出来，并显示 "Hello, World!"。

状态管理

Svelte 自带了一套状态管理机制，使得管理组件之间的数据变得非常方便。你可以使用 store 来实现这一点。下面是一个使用 Writable 存储的例子：

// store.js
import { writable } from 'svelte/store';

export const count = writable(0);

然后，在组件中使用这个存储：

<!-- Counter.svelte -->
<script>
  import { count } from './store.js';
</script>

<h1>Count: {$count}</h1>

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

这里，$count 语法用于订阅 count 存储的值。每当 count 改变时，$count 也会自动更新。

路由

对于单页应用 (SPA) 来说，路由是非常重要的功能。你可以使用第三方库如 svelte-routing 来实现这一功能。首先，安装这个库：

npm install svelte-routing
# 或者
yarn add svelte-routing

然后，根据需要在你的项目中设置路由。例如：

// www.javascriptcn.com code example
// router.js
import { Router, Route, Link } from 'svelte-routing';
import Home from './Home.svelte';
import About from './About.svelte';

export default function setupRouter() {
  return (
    <Router>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

总结

本章介绍了如何将 Vite 与 Svelte 结合起来，创建一个高效的现代前端项目。通过上述步骤，你已经掌握了从项目初始化到组件编写的基本流程。接下来，你可以继续深入学习 Svelte 的更多高级特性，如过渡效果、动作等，以及进一步优化你的 Vite + Svelte 项目。