nodejs：Vite + Svelte + ts 入门示例

Node.js + Vite + TypeScript + Svelte 极简入门示例

这是一套超轻量、高性能的前端组合，我会带你从零创建一个可直接运行的完整示例，包含基础组件、TS 类型、样式，开箱即用。

前置环境

先确保你的电脑安装了：

Node.js 18+ (推荐 LTS 版本)
终端（CMD/PowerShell/终端工具均可）

一、快速创建项目

打开终端，逐行执行命令：

bash 复制代码

# 1. 创建 vite 项目（按照提示选择 Svelte + TypeScript）
npm create vite@latest svelte-ts-demo

# 2. 进入项目目录
cd svelte-ts-demo

# 3. 安装依赖
npm install

# 4. 启动开发服务器
npm run dev

创建时的选项（选择参考）

项目名称：svelte-ts-demo
框架：选择 Svelte
变体：选择 Svelte + TypeScript

启动成功后，打开浏览器访问：http://localhost:5173 就能看到默认页面。

二、核心文件结构（入门必看）

复制代码

svelte-ts-demo/
├── src/
│   ├── App.svelte       # 根组件（主页面）
│   ├── main.ts          # 项目入口文件
│   └── vite-env.d.ts    # TS 类型定义
├── index.html           # HTML 入口
├── package.json         # 依赖/脚本
└── tsconfig.json        # TypeScript 配置

三、编写入门示例代码

我们直接修改 App.svelte，写一个带 TS 类型、计数器、组件化的完整示例。

1. 根组件：src/App.svelte

svelte 复制代码

<script lang="ts">
  // 开启 TypeScript
  // 定义 TS 接口类型
  interface User {
    name: string;
    age: number;
  }

  // 响应式数据（Svelte 赋值即更新）
  let count = 0;
  let user: User = {
    name: "Svelte + TS 新手",
    age: 20
  };

  // TS 类型约束的函数
  function increment(): void {
    count += 1;
  }

  function changeUser(): void {
    user.age += 1;
    user.name = "进阶用户";
  }
</script>

<!-- HTML 结构 -->
<main>
  <h1>Hello {user.name}</h1>
  <p>年龄：{user.age}</p>

  <div class="counter">
    <p>计数器：{count}</p>
    <button on:click={increment}>点我 +1</button>
    <button on:click={changeUser}>修改用户信息</button>
  </div>
</main>

<!-- CSS 样式（组件内样式，自动隔离） -->
<style>
  main {
    max-width: 600px;
    margin: 2rem auto;
    padding: 0 1rem;
    text-align: center;
    font-family: Arial, sans-serif;
  }

  .counter {
    margin-top: 2rem;
    padding: 1rem;
    border: 1px solid #eee;
    border-radius: 8px;
  }

  button {
    margin: 0 0.5rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    background: #ff3e00;
    color: white;
    border: none;
    border-radius: 4px;
  }
</style>

2. 入口文件：src/main.ts（无需修改，默认即可）

typescript 复制代码

import './app.css'
import App from './App.svelte'

const app = new App({
  target: document.getElementById('app')!,
})

export default app

四、运行与验证

bash 复制代码

# 开发模式（热更新，修改代码自动刷新）
npm run dev

# 生产打包（生成 dist 文件夹）
npm run build

# 预览打包结果
npm run preview

打开页面后你可以：

点击按钮修改计数器
点击按钮修改用户信息
所有数据都是响应式的（无需手动更新 DOM）

五、核心知识点（入门必掌握）

<script lang="ts">
开启 TypeScript 支持，可直接写类型、接口、泛型。
响应式
Svelte 中直接修改变量就能更新视图，不需要 React 的 useState 或 Vue 的 ref。
事件绑定
on:click={函数名}，极简语法。
样式隔离
<style> 里的代码只作用于当前组件，不会污染全局。
Vite 优势
启动速度极快、热更新秒刷新、内置 TS 支持。

六、扩展：创建子组件示例

新建 src/components/Hello.svelte 组件：

svelte 复制代码

<script lang="ts">
  // TS 定义 props 类型
  export let message: string;
</script>

<p>子组件：{message}</p>

<style>
  p {
    color: #42b983;
    font-weight: bold;
  }
</style>

在 App.svelte 中使用：

svelte 复制代码

<script lang="ts">
  import Hello from './components/Hello.svelte';
</script>

<Hello message="我是子组件" />

总结

一行命令创建 Vite + Svelte + TS 项目
组件 = TS 脚本 + HTML + CSS（三合一）
无虚拟 DOM，性能极高，语法极简
自带类型安全，开发体验流畅
热更新极速，适合快速开发

这个示例已经覆盖了入门 90% 的核心用法，你可以直接基于它继续扩展项目！