Preface
Svelte, a front-end framework that is very "interesting" and "fun" to use. Svelte has been loved by developers since its inception. According to statistics,From 2019 to 2024, it has been the No. 1 front-end framework that developers are most interested in for 6 consecutive years.：
Svelte is known for its unique compile-time optimization mechanism, withlightweight、high performance、Easy to useand other characteristics,It is very suitable for building lightweight web projects and is also my preferred technology stack for personal projects.
Currently, Svelte has released the latest official documentation based on Svelte 5, but it lacks the corresponding Chinese documentation. In order to help everyone learn Svelte, the official documentation has been translated for AiDian.
I also built Svelte’s latest Chinese documentation site:, if you need assistance in learning, you can also buy my booklet"Svelte Development Guide", three major chapters: Grammar, Practical, and Principles will help you master Svelte systematically!
Although it is a translation, I personally do not like to strictly adhere to the original text. In order to ensure smooth reading in Chinese, some sentences will be deleted, and additional explanations will be provided for difficult parts. I hope it can bring you a good Chinese learning experience.
Welcome to visit me"Friends Circle",join in"Low-key, pragmatic and outstanding Chinese young people"The front-end community shares technology and helps you grow.
Overview
Svelte is a framework for building web user interfaces. It uses a compiler to convert declarative components written in HTML, CSS, and JavaScript...
<!--- file: --->
<script>
function greet() {
alert('Welcome to Svelte!');
}
</script>
<button onclick={greet}>Click me</button>
<style>
button {
font-size: 2em;
}
</style>...converts to lean, highly optimized JavaScript.
You can use it to build anything on the web, from standalone components to full-stack applications (using Svelte’s companion application frameworkSvelteKit), and anything in between.
These pages serve as reference documentation. If you are new to Svelte, we recommend starting withInteractive tutorialGet started, and come back here when you encounter problems.
You can also do this onlinetraining groundTry Svelte, or if you need a more fully featured environment, check outStackBlitzTry it on.
Getting Started Guide
We recommend usingSvelteKit, which is caused byViteDriven by Svelte official application framework:
npx sv create myapp
cd myapp
npm install
npm run dev
Don’t worry if you don’t know Svelte yet! You can ignore all the great features SvelteKit brings to the table for now and learn more about it later.
Alternatives to SvelteKit
You can also runnpm create vite@latest,choosesvelteOption to use Svelte directly with Vite. so,npm run buildwill usevite-plugin-svelteexistdistGenerate HTML, JS and CSS files in the directory. In most cases, you may also needChoose a routing library。
Although there arePlugins for Rollup, Webpack, and other tools, but we recommend Vite.
Editor tools
The Svelte team maintains aVS Code plugin, but also with otherEditorand tool integration.
You can also usesv checkCheck your code at the command line.
Get help
don't be shyDiscord chat roomAsk for help! You can alsoStack OverflowFind the answer on.
Svelte series
This article has been included in the column"Svelte Series", the series is expected to be 40 articles.
In addition I have writtenJavaScript series、TypeScript series、React series、series、VuePress blog building seriesWaiting for 14 series of articles, full series of articles table of contents:/mqyqingfeng/Blog
Establishing communication through text is a kind of fate in itself. Welcome to watch my"Friends Circle",join in"Low-key, pragmatic and outstanding Chinese young people"The front-end community shares technology and helps you grow.