Panduan pemula ' s ke Sveltekit

sveltekit: panduan mesra pemula untuk membina aplikasi web dengan svelte

Sveltekit, rangka kerja yang disokong secara rasmi yang dibina di atas Svelte, memudahkan pembangunan frontend dengan menggabungkan ciri-ciri penting seperti penghalaan, susun atur, dan penyampaian sisi pelayan. Tutorial ini membimbing anda melalui membina aplikasi web asas yang mempamerkan profil pengguna khayalan, menonjolkan ciri -ciri utama Sveltekit.

Konsep Utama:

1. Kuasa Sveltekit: Sveltekit meningkatkan Svelte dengan menambahkan ciri-ciri penting untuk membina aplikasi web penuh, menghasilkan prestasi dan pengalaman pengguna yang lebih baik.
2. Boost Prestasi: Penyusunan Build-Time, Pemisahan Kod, Prerendering, dan Prefetching mengoptimumkan kelajuan aplikasi dan SEO.
3. kesederhanaan dan fleksibiliti: Sveltekit menyelaraskan penciptaan aplikasi web, menawarkan pilihan penempatan yang fleksibel dan pengurusan kandungan dinamik yang cekap.

mengapa memilih svelte?

Populariti Svelte yang semakin meningkat berpunca dari komponen yang boleh digunakan semula, yang sama-sama dengan React. Walau bagaimanapun, kompilasi

binaan membezakannya. Tidak seperti rangka kerja dengan tafsiran tafsiran , Svelte menyusun kod semasa proses membina, menghasilkan aplikasi web yang lebih kecil dan lebih cepat. Rangka kerja lain menghantar lebih banyak kod kepada pelanggan, meningkatkan masa beban. Kesederhanaan Svelte menjadikannya mesra pemula; Pengetahuan asas HTML, CSS, dan JavaScript cukup untuk memulakan komponen bangunan.

Keperluan untuk Sveltekit:

Walaupun Svelte menawarkan pengalaman pembangunan yang hebat, Sveltekit menangani bidang utama untuk pengalaman pengguna yang lebih baik dan fleksibiliti penempatan. Ia meningkatkan pendekatan tradisional kod bundling ke dalam fail JavaScript tunggal.

Sveltekit bertambah baik dengan ini dengan:

• Beban halaman awal yang dipertingkatkan: Daripada melayani fail HTML yang kosong, Sveltekit menyediakan HTML pra-diberikan untuk memuatkan dan faedah SEO yang lebih cepat melalui rendering prerendering dan pelayan sisi. Routing sisi pelanggan mengekalkan rasa aplikasi satu halaman.
• Pemisahan kod: Aplikasi dibahagikan kepada ketulan JavaScript yang lebih kecil setiap laluan, hanya memuat kod yang diperlukan, meningkatkan prestasi. Prefetching terus mengoptimumkan ini.
• Penyebaran yang fleksibel: Adaptor Memudahkan penggunaan di pelbagai platform (hosting fail statik, fungsi tanpa pelayan, pelayan nod).
• kemudahan penggunaan: sveltekit mengendalikan proses membina kompleks, memudahkan pembangunan.

Bermula:

1. Prasyarat: node.js (Pasang melalui NVM). Kod ini boleh didapati di GitHub.
2. Persediaan Projek:

   <code class="language-bash">npm init svelte@latest svelteKit-example-app</code>

   Pilih "Sveltekit Demo App," "Tidak" untuk TypeScript, dan "Tidak" untuk pilihan tambahan.

3. Persekitaran Pembangunan:

   <code class="language-bash">cd svelteKit-example-app
   npm install
   npm run dev -- --open</code>

4. CLEANUP: Keluarkan fail yang tidak perlu dari folder src/lib dan src/routes (seperti yang terperinci dalam artikel asal). Ubah suai src/routes/styles.css dan src/routes/ page.svelte seperti yang diarahkan.

susun atur dan penghalaan sisi klien:

Komponen layout.svelte menggunakan kod di beberapa halaman. Ubah suai untuk memasukkan tag meta dan bar navigasi (seperti yang ditunjukkan dalam asal). Kemas kini komponen /src/routes/about/ page.svelte.

halaman statik dan prerendering:

Untuk kandungan statik, halaman individu prerender dengan menambahkan export const prerender = true; ke fail page.svelte yang relevan (mis., /src/routes/about/ page.svelte). Tukar ke adapter-node untuk membina dan menjalankan pelayan nod.

endpoints:

Buat titik akhir API (/src/routes/api/ server.js) menggunakan perpustakaan faker untuk menghasilkan data pengguna yang mengejek. Ini menyerupai API backend.

mengambil data dengan load fungsi:

Gunakan fungsi load dalam /src/routes/ page.js untuk mengambil data dari titik akhir /api dan lulus ke komponen page.svelte. data prop dalam page.svelte menerima data yang diambil.

parameter dinamik:

Buat Laluan Dinamik () untuk memaparkan butiran pengguna. Akses parameter

dari sifat /src/routes/[lastName]/ page.server.js dalam fungsi lastName. Buat UI dalam params. load /src/routes/[lastName]/ page.svelte

Prefetching:

Tambah

ke tag

dalam data-sveltekit-preload-data="hover" untuk prefetch data pada hover, meningkatkan pengalaman pengguna. <a></a> /src/routes/ page.svelte

Kesimpulan:

Sveltekit memudahkan membina aplikasi web yang berprestasi tinggi, mesra seo. Fleksibilitasnya membolehkan penyesuaian ciri-ciri seperti rendering sisi pelayan. Gabungan Svelte dan Sveltekit memberikan pengalaman pembangunan yang kuat dan cekap. Terokai sveltekit boilerplates untuk persediaan projek pra-konfigurasi.

Atas ialah kandungan terperinci Panduan pemula ' s ke Sveltekit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!