Cari tahu cara memulai dengan aplikasi Svelte yang bergaya.

Kerangka web datang dan pergi, tetapi salah satu yang paling menjanjikan adalah Svelte. Svelte adalah alternatif yang bagus untuk React dan, meskipun sudah memiliki komunitas yang besar, ini jelas merupakan kerangka kerja yang harus diperhatikan. Svelte memudahkan penataan aplikasi Anda, dengan beberapa pendekatan yang tersedia.

Aplikasi Styling Langsing

Setiap pustaka atau kerangka kerja UI memerlukan metode untuk mengatur gaya komponennya. Sebagian besar framework berbasis komponen mendukung metode tradisional untuk menata komponen: cukup impor file CSS dan selesai. Langsing tidak terkecuali. Di Svelte, ada tiga cara utama untuk mendesain aplikasi Anda, masing-masing dengan kelebihan dan kekurangannya sendiri.

Menyiapkan Proyek Langsing Anda

Untuk menginstal Svelte, Anda dapat menggunakan Alat build front-end ViteJS. Untuk mengatur semuanya, pastikan bahwa waktu proses Node.js Dan Manajer Paket Node (NPM) terinstal dengan benar di komputer Anda. Anda dapat memverifikasi ketersediaan Node.js dan NPM dengan menjalankan perintah terminal berikut ini:

instagram viewer 

node -v

Setelah memastikan Node berjalan, buka terminal dan jalankan yang berikut ini:

npm create vite

Atau:

yarn create vite

Ini harus merancah proyek Vite baru. Setel nama proyek menjadi apa pun yang Anda inginkan, kerangka kerjanya harus "Svelte" dan variannya harus JavaScript (tetapi Anda dapat menggunakan TypeScript jika Anda merasa nyaman dengan itu). Sekarang, alihkan ke direktori proyek dengan CD perintah dan jalankan perintah berikut untuk menginstal dependensi yang diperlukan:

npm install

Atau:

yarn

Setelah menginstal dependensi, Anda dapat memulai server pengembangan dengan menjalankan:

npm run dev

Atau:

yarn dev

Mendefinisikan Markup Proyek

Buka proyek di editor kode apa pun pilihan dan hapus aktiva Dan lib map. Juga, pastikan Anda menghapus konten dari aplikasi.css berkas dan App.svelte mengajukan. Buka main.js file dan ganti isinya dengan yang berikut:

import App from'./App.svelte'
const app = new App({
 target: document.getElementById('app'),
})
exportdefault app

Selanjutnya, buka App.svelte berkas dan di naskah beri tag dan buat larik yang akan menampung berbagai tautan, seperti ini: