Svelte 模板说明

本模板可帮助你在 Vite 中启动 Svelte 开发。

推荐的 IDE 设置

VS Code + Svelte。

需要官方 Svelte 框架？

请查看 SvelteKit，它同样由 Vite 驱动。借助其 serverless-first 方法，你可以部署到任何平台，并适配各种平台；开箱即用地支持 TypeScript、SCSS 和 Less，并可轻松添加对 mdsvex、GraphQL、PostCSS、Tailwind CSS 等的支持。

技术考虑

为什么要使用它而不是 SvelteKit？

• SvelteKit 自带路由解决方案，这可能不是某些用户的首选。
• 它首先是一个框架，恰好底层使用了 Vite，而不是一个 Vite 应用。

本模板尽可能精简，以便快速上手 Vite + Svelte，同时兼顾 HMR 和智能感知方面的开发者体验。它展示了与其他 create-vite 模板相当的能力，是初学者尝试 Vite + Svelte 项目的一个良好起点。

如果之后你需要 SvelteKit 提供的扩展能力和可扩展性，本模板的结构与 SvelteKit 类似，因此迁移起来非常容易。

为什么包含 .vscode/extensions.json？

其他模板通过 README 间接推荐扩展，但此文件可以让 VS Code 在打开项目时提示用户安装推荐的扩展。

为什么在 JS 模板中启用 checkJs？

在运行时更改变量类型的情况很可能是意外，而非有意为之。这提供了开箱即用的高级类型检查。如果你希望利用 JavaScript 的动态类型特性，更改配置很容易。

为什么 HMR 不保留我的本地组件状态？

HMR 状态保留存在许多陷阱！由于它常常表现出令人意外的行为，在 svelte-hmr 和 @sveltejs/vite-plugin-svelte 中默认已禁用。你可以阅读这里的详细信息。

如果组件中有需要保留的重要状态，请考虑创建一个不会被 HMR 替换的外部 store。

// store.js
// 一个极其简单的外部 store
import { writable } from 'svelte/store'
export default writable(0)