# svelte学习

**Repository Path**: caker22/svelte-learning

## Basic Information

- **Project Name**: svelte学习
- **Description**: svelte课程学习
地址 https://www.bilibili.com/video/BV1fG4LePEuQ?spm_id_from=333.788.player.switch&vd_source=2b744c764a593ebe2af25bc4e64588d0&p=49
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-30
- **Last Updated**: 2025-05-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Svelte + TypeScript + Vite + UnoCSS

这是一个使用Svelte 5、TypeScript、Vite和UnoCSS构建的初始项目模板。

## 功能特点

- 💻 [Svelte 5](https://svelte.dev/)
- 🔧 [TypeScript](https://www.typescriptlang.org/)
- ⚡️ [Vite](https://vitejs.dev/)
- 🎨 [UnoCSS](https://unocss.dev/) - 即时按需原子CSS引擎

## 快速开始

```bash
# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

# 本地预览生产构建
pnpm preview
```

## 推荐IDE设置

- [VS Code](https://code.visualstudio.com/)
- [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)
- [UnoCSS for VS Code](https://marketplace.visualstudio.com/items?itemName=antfu.unocss)

## 项目结构

```
/
├── public/          # 静态资源
│   ├── assets/      # 项目资源文件
│   ├── lib/         # 组件库
│   ├── App.svelte   # 根组件
│   ├── app.css      # 全局样式
│   └── main.ts      # 应用入口
├── uno.config.ts    # UnoCSS配置
└── vite.config.ts   # Vite配置
```

## 自定义配置

参见 [Vite配置参考](https://vitejs.dev/config/)。

## Need an official Svelte framework?

Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.

## Technical considerations

**Why use this over SvelteKit?**

- It brings its own routing solution which might not be preferable for some users.
- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.

This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.

Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.

**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**

Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.

**Why include `.vscode/extensions.json`?**

Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.

**Why enable `allowJs` in the TS template?**

While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.

**Why is HMR not preserving my local component state?**

HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).

If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.

```ts
// store.ts
// An extremely simple external store
import { writable } from 'svelte/store'
export default writable(0)
```