Şık bir Svelte uygulamasıyla nasıl başlayacağınızı öğrenin.

Web çerçeveleri gelir ve gider, ancak en umut verici olanlardan biri Svelte'dir. Svelte, React'e harika bir alternatiftir ve zaten geniş bir topluluğa sahip olmasına rağmen kesinlikle dikkat edilmesi gereken bir çerçevedir. Svelte, çeşitli yaklaşımlarla uygulamalarınızı şekillendirmeyi kolaylaştırır.

Şık Tasarım Uygulamaları

Her UI kitaplığı veya çerçevesi, bileşenlerini biçimlendirmek için bir yöntem gerektirir. Bileşen tabanlı çerçevelerin çoğu, bileşenleri şekillendirmenin geleneksel yöntemini destekler: CSS dosyasını içe aktarmanız yeterlidir. Svelte bir istisna değildir. Svelte'de uygulamalarınızı şekillendirmenin her biri kendi avantaj ve dezavantajlarına sahip üç ana yolu vardır.

Svelte Projenizi Kurma

Svelte'yi kurmak için, ViteJS ön uç oluşturma aracı. Ayarları yapmak için, Node.js çalışma zamanı Ve Düğüm Paket Yöneticisi (NPM) bilgisayarınıza doğru şekilde yüklendiğinden emin olun. Bu terminali aşağıdaki komutu çalıştırarak Node.js ve NPM'nin kullanılabilirliğini doğrulayabilirsiniz:

instagram viewer 
node -v

Düğümün çalıştığından emin olduktan sonra terminali açın ve aşağıdakileri çalıştırın:

npm create vite

Veya:

yarn create vite

Bu, yeni bir Vite projesinin temelini oluşturmalıdır. Proje adını istediğiniz gibi ayarlayın, çerçeve "Svelte" olmalı ve değişken JavaScript olmalıdır (ancak bu konuda rahatsanız TypeScript kullanabilirsiniz). Şimdi, ile proje dizinine geçin. CD komutunu verin ve gerekli bağımlılıkları yüklemek için aşağıdaki komutu çalıştırın:

npm install

Veya:

yarn

Bağımlılıkları kurduktan sonra, aşağıdakileri çalıştırarak geliştirme sunucusunu başlatabilirsiniz:

npm run dev

Veya:

yarn dev

Projenin İşaretlemesini Tanımlama

Projeyi herhangi bir kod düzenleyicide açın ve varlıklar Ve lib dosya. Ayrıca, içeriğini temizlediğinizden emin olun. uygulama.css dosya ve App.svelte dosya. Aç ana.js dosyasını açın ve içindekileri aşağıdakiyle değiştirin:

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

Ardından, App.svelte dosya ve içinde senaryo etiketleyin ve farklı bağlantıları tutacak bir dizi oluşturun, bunun gibi: