pull/17365/merge
🏔️ Peak 7 days ago committed by GitHub
commit 0a22870d97
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -2,7 +2,11 @@
title: Getting started title: Getting started
--- ---
We recommend using [SvelteKit](../kit), which lets you [build almost anything](../kit/project-types). It's the official application framework from the Svelte team and powered by [Vite](https://vite.dev/). Create a new project with: We recommend using [SvelteKit](../kit), which lets you [build almost anything](../kit/project-types). It's the official application framework from the Svelte team and powered by [Vite](https://vite.dev/).
Create a new project with your preferred package manager:
**npm:**
```sh ```sh
npx sv create myapp npx sv create myapp
@ -11,6 +15,35 @@ npm install
npm run dev npm run dev
``` ```
**yarn:**
```sh
yarn dlx sv create myapp
cd myapp
yarn install
yarn dev
```
**pnpm:**
```sh
pnpm dlx sv create myapp
cd myapp
pnpm install
pnpm dev
```
**bun:**
```sh
bunx sv create myapp
cd myapp
bun install
bun dev
```
See the [CLI docs](../cli) for more information about the `sv` command line tool.
Don't worry if you don't know Svelte yet! You can ignore all the nice features SvelteKit brings on top for now and dive into it later. Don't worry if you don't know Svelte yet! You can ignore all the nice features SvelteKit brings on top for now and dive into it later.
## Alternatives to SvelteKit ## Alternatives to SvelteKit
@ -21,12 +54,83 @@ You can also use Svelte directly with Vite by running `npm create vite@latest` a
There are also [plugins for other bundlers](/packages#bundler-plugins), but we recommend Vite. There are also [plugins for other bundlers](/packages#bundler-plugins), but we recommend Vite.
## Installing Svelte in an existing project
If you have an existing project for example via [Inertia](https://inertiajs.com/) and want to add Svelte to it, you can install Svelte and [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte) manually.
First, install Svelte and the Vite plugin:
**npm:**
```sh
npm install --save-dev --save-exact svelte @sveltejs/vite-plugin-svelte
```
**yarn:**
```sh
yarn add --dev --exact svelte @sveltejs/vite-plugin-svelte
```
**pnpm:**
```sh
pnpm add --save-dev --save-exact svelte @sveltejs/vite-plugin-svelte
```
**bun:**
```sh
bun add --dev --exact svelte @sveltejs/vite-plugin-svelte
```
Then, add the Svelte plugin to your `vite.config.js`:
```js
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
export default defineConfig({
plugins: [
svelte({
/* plugin options */
})
]
});
```
## Editor tooling ## Editor tooling
The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), and there are integrations with various other [editors](https://sveltesociety.dev/collection/editor-support-c85c080efc292a34) and tools as well. The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), and there are integrations with various other [editors](https://sveltesociety.dev/collection/editor-support-c85c080efc292a34) and tools as well.
You can also check your code from the command line using [`sv check`](https://github.com/sveltejs/cli). You can also check your code from the command line using [`sv check`](https://github.com/sveltejs/cli) to check for Unused CSS
Svelte A11y hints, JavaScript/TypeScript compiler errors.
Alternatively, you can install `svelte-check` (powers `sv check`) directly:
**npm:**
```sh
npm install --save-dev --save-exact svelte-check
```
**yarn:**
```sh
yarn add --dev --exact svelte-check
```
**pnpm:**
```sh
pnpm add --save-dev --save-exact svelte-check
```
**bun:**
```sh
bun add --dev --exact svelte-check
```
## Getting help ## Getting help

Loading…
Cancel
Save