---
title: "Svelte"
locale: "zh"
version: "1.x"
canonicalUrl: "https://farmfe.org/zh/docs/1.x/frameworks/svelte"
publicationStatus: "prerelease"
---

<a id="svelte"></a>
# Svelte


基于 ` Farm ` 创建一个 ` Svelte ` 项目。


` Farm ` 提供两种方案来支持创建 ` Svelte ` 项目:


- 使用 ` create-farm ` 脚手架创建脚手架项目
- 你可以根据当前文档手动创建一个 ` Svelte ` 项目


<a id="创建-svelte-项目"></a>
### 创建 Svelte 项目


**npm**

```sh
npm create farm@latest
```

**pnpm**

```sh
pnpm create farm@latest
```

**yarn**

```sh
yarn create farm@latest
```

**bun**

```sh
bun create farm@latest
```


在 ` Select Framework ` 中选择 ` Svelte ` 模版



> [!WARNING]
> Svelte
> 
> 对于 ` Svelte ` 的支持, ` Farm ` 推荐使用 ` Vite ` 插件。



```javascript
import { defineConfig } from '@farmfe/core'
import { svelte } from '@sveltejs/vite-plugin-svelte'

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

```


```javascript
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'

export default {
  preprocess: vitePreprocess(),
}
```


开发环境时运行


**npm**

```sh
npm run dev
```

**pnpm**

```sh
pnpm run dev
```

**yarn**

```sh
yarn run dev
```

**bun**

```sh
bun run dev
```


在生产环境下进行打包


**npm**

```sh
npm run build
```

**pnpm**

```sh
pnpm run build
```

**yarn**

```sh
yarn run build
```

**bun**

```sh
bun run build
```


预览生产环境打包之后构建的产物


**npm**

```sh
npm run preview
```

**pnpm**

```sh
pnpm run preview
```

**yarn**

```sh
yarn run preview
```

**bun**

```sh
bun run preview
```


如若想查看示例详情: [Svelte 示例](<https://github.com/farm-fe/farm/tree/main/examples/vite-adapter-svelte>)