Svelte安装 #

一、环境准备 #

1.1 前置要求 #

要求	版本	说明
Node.js	>= 18.0	运行时环境
npm/pnpm/yarn	最新版	包管理器
VS Code	推荐	代码编辑器

1.2 检查环境 #

bash

node -v
npm -v

二、创建项目 #

2.1 使用 Vite 创建（推荐） #

Vite 是 Svelte 官方推荐的构建工具：

bash

npm create vite@latest my-svelte-app -- --template svelte

cd my-svelte-app
npm install
npm run dev

2.2 使用 SvelteKit 创建 #

SvelteKit 是官方全栈框架：

bash

npm create svelte@latest my-sveltekit-app

cd my-sveltekit-app
npm install
npm run dev

2.3 创建选项说明 #

text

SvelteKit 创建向导选项：

? Which Svelte app template? 
  ❯ Skeleton project          最小模板
    Skeleton project (TypeScript)  TypeScript最小模板
    Library           库项目

? Add type checking with TypeScript?
  ❯ Yes, using TypeScript syntax
    Yes, using JSDoc comments
    No

? Select additional options
  ◉ Add ESLint for code linting
  ◉ Add Prettier for code formatting
  ◉ Add Playwright for browser testing
  ◉ Add Vitest for unit testing

2.4 使用 pnpm 创建 #

bash

pnpm create vite my-svelte-app -- --template svelte

cd my-svelte-app
pnpm install
pnpm dev

三、项目结构 #

3.1 Vite 项目结构 #

text

my-svelte-app/
├── public/
│   └── vite.svg
├── src/
│   ├── lib/
│   │   └── Counter.svelte
│   ├── app.css
│   ├── App.svelte
│   └── main.js
├── index.html
├── package.json
├── svelte.config.js
└── vite.config.js

3.2 SvelteKit 项目结构 #

text

my-sveltekit-app/
├── src/
│   ├── lib/
│   │   └── components/
│   ├── routes/
│   │   ├── +page.svelte
│   │   └── +layout.svelte
│   ├── app.html
│   └── app.css
├── static/
├── package.json
├── svelte.config.js
├── vite.config.js
└── tsconfig.json

3.3 核心文件说明 #

文件	说明
`svelte.config.js`	Svelte 配置文件
`vite.config.js`	Vite 构建配置
`src/App.svelte`	根组件
`src/main.js`	应用入口
`src/routes/`	SvelteKit 路由目录

四、开发工具配置 #

4.1 VS Code 插件 #

推荐安装以下插件：

text

必装插件
├── Svelte for VS Code  官方插件，语法高亮
├── Svelte 3 Snippets   代码片段
└── Svelte Intellisense 智能提示

推荐插件
├── ESLint              代码检查
├── Prettier            代码格式化
└── Error Lens          错误提示

4.2 VS Code settings.json #

json

{
  "svelte.enable-ts-plugin": true,
  "svelte.plugin.css.diagnostics.enable": true,
  "svelte.plugin.svelte.defaultScriptLanguage": "typescript",
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode",
    "editor.formatOnSave": true
  }
}

4.3 ESLint 配置 #

javascript

import js from '@eslint/js';
import svelte from 'eslint-plugin-svelte';
import globals from 'globals';

export default [
  js.configs.recommended,
  ...svelte.configs['flat/recommended'],
  {
    languageOptions: {
      globals: globals.browser
    }
  }
];

4.4 Prettier 配置 #

javascript

import prettier from 'prettier';
import pluginSvelte from 'prettier-plugin-svelte';

export default {
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'none',
  printWidth: 100,
  plugins: [pluginSvelte],
  overrides: [
    {
      files: '*.svelte',
      options: {
        parser: 'svelte'
      }
    }
  ]
};

五、常用命令 #

5.1 开发命令 #

bash

npm run dev

5.2 构建命令 #

bash

npm run build

5.3 预览构建结果 #

bash

npm run preview

5.4 检查代码 #

bash

npm run check

六、svelte.config.js 配置 #

6.1 基础配置 #

javascript

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

export default {
  preprocess: vitePreprocess()
};

6.2 完整配置示例 #

javascript

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

export default {
  preprocess: vitePreprocess(),
  
  kit: {
    adapter: adapter(),
    alias: {
      $lib: 'src/lib',
      $components: 'src/lib/components'
    }
  },
  
  compilerOptions: {
    warningFilter: (warning) => {
      return !warning.code.includes('a11y');
    }
  }
};

七、TypeScript 支持 #

7.1 安装 TypeScript #

bash

npm install -D typescript @types/node

7.2 tsconfig.json #

json

{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "moduleResolution": "bundler"
  }
}

7.3 在 Svelte 中使用 TypeScript #

svelte

<script lang="ts">
  interface Props {
    name: string;
    count?: number;
  }
  
  let { name, count = 0 }: Props = $props();
  
  let doubled: number = $derived(count * 2);
</script>

<h1>Hello {name}!</h1>
<p>Count: {count}, Doubled: {doubled}</p>

八、常见问题 #

8.1 Node 版本问题 #

bash

nvm install 18
nvm use 18

8.2 依赖安装失败 #

bash

rm -rf node_modules package-lock.json
npm install

8.3 热更新不工作 #

javascript

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

export default defineConfig({
  plugins: [svelte({
    hot: true
  })],
  server: {
    watch: {
      usePolling: true
    }
  }
});

九、总结 #

步骤	命令
创建项目	`npm create vite@latest my-app -- --template svelte`
安装依赖	`npm install`
启动开发	`npm run dev`
构建项目	`npm run build`

开发环境搭建要点：

使用 Vite 创建项目，获得最佳开发体验
安装 VS Code 的 Svelte 插件
配置 ESLint 和 Prettier 保证代码质量
根据需要添加 TypeScript 支持