Vite, Hızlı Başlangıç Süreleri, Sıcak Modül Değiştirme (HMR) ve güçlü eklenti desteği ile geliştirici deneyimini geliştirmek için tasarlanmış modern, hızlı bir yapı aracıdır. Vite öğrenen yeni geliştiriciler için, temel kurulumdan gelişmiş özelliklere kadar her şeyi kapsayan birçok ayrıntılı öğretici ve kaynak var. Aşağıda, yeni geliştiriciler için yararlı olan VITE için öğrenme kaynakları ve öğreticileri hakkında kapsamlı bir genel bakış bulunmaktadır.
***
Resmi Vite Belgeleri ve Rehberi
Vite resmi web sitesi yeni geliştiriciler için sağlam bir başlangıç noktası sağlar. Kılavuz, kurulum, temel kullanım, yapılandırma ve popüler çerçevelerle entegrasyonlardan geçer. Geliştirme sunucusu başlatma, sıcak modül değişimi, üretim binası, çevre değişkenleri, statik varlıkların işlenmesi ve eklenti kullanımı gibi temel kavramları açıklar. Belgeler sıklıkla güncellenir ve temel yapılandırmaların yanı sıra temeller için güvenilir bir referans görevi görür.
***
Video kursları ve öğreticiler
** ön uç ustaları - Vite kursunu öğrenin
Bir endüstri uzmanı tarafından yönetilen Frontend Masters'ın ayrıntılı bir video kursu Vite'ı kapsamlı bir şekilde kapsar. Modül ithalatı, dinamik ithalat ve kod bölme, CSS ve CSS modülleri ile şekillendirme, görüntü kullanma, ortam değişkenleri, JSON kullanma ve eklenti geliştirme gibi pratik konulara geçerek kurulum ve kurulum ile başlar. Kurs, öğrenmeyi sağlamlaştırmak için egzersizler içerir ve yapı eklentileri ve yapıları optimize etme gibi gerçek dünyadaki kullanımları kapsar.
Anahtar önemli noktalar şunları içerir:
- Anında Sunucu Başlangıç ve Verimli Sıcak Modül Değiştirme
- React, Vue ve Svelte gibi çerçevelerle entegrasyonlar
- Kod bölme ve dinamik ithalat
- Vite eklentileri nasıl oluşturulur ve kullanılır
- Yapı optimizasyonları için teknikler
***
** YouTube Crash kursları
YouTube'da Vite ile hızlı bir şekilde başlamaya odaklanan birden fazla başlangıç dostu kaza kursu var. Bunlar tipik olarak:
- CLI kullanarak yeni bir Vite projesi oluşturmak
- Hızlı Geliştirme Sunucusu Başlangıç ve Canlı Yeniden Yükleme
- Yapılandırma için ortam değişkenleri nasıl kullanılır
- Görüntüler ve yazı tipleri gibi statik varlıkların işlenmesi
- VITE ile eklentilerle yapılandırma ve genişletme
- Üretime hazır paketler bina
Bu videolar görsel bağlam ve kod gösterileri sağlar, bu da onları uygulamalı öğrenmeyi tercih eden geliştiriciler için uygun hale getirir.
***
Makaleler ve Yazılı Kılavuzlar
** Daha İyi Stack'in Yeni Başlayanlar Vite.js Rehberi
Bu makale, Vue ve React gibi çerçevelerle yanan hızlı başlangıçlar, sıcak modül değişimi ve sorunsuz entegrasyon gibi VITE'nin temel avantajlarını vurgulamaktadır. Yeni bir VITE projesi oluşturmak, CLI seçeneklerini açıklamak, proje iskele ve geliştirme sunucusunu başlatmak için adım adım talimatlar içerir. Kılavuz ayrıca Vite'ın yerel ES modüllerini, yerleşik eklenti sistemi ve toplama tabanlı üretim yapılarını kullanmasının faydalarını tartışıyor.
Anahtar Öğrenme Noktaları:
- Vite'ın mimarisini ve geleneksel paketlerden nasıl farklı olduğunu anlamak
- vanilya javascript veya çerçeveye dayalı projeler kurmak
- Bağımlılık Ön Bağlantı için Esbuild'i Kullanma
- Geliştirme sunucusunu tüm uygulama yeniden oluşturmalarını beklemeden anında çalıştırmak
- Üretim yapıları için Vite Config'i özelleştirme
***
** Vue School'un Vue geliştiricileri için Vite'a Giriş
Özellikle Vue CLI'ye aşina olabilecek VUE geliştiricilerini hedefleyen bu kaynak, VIE'nin neden Vue 3 projeleri için önerilen yeni araç olduğunu açıklıyor. Yeni Vue projelerinin VITE ile nasıl başlatılacağını, Vue Cli'den farklılıkların ve VITE'in daha hızlı yapılar ve yerel ES modülleriyle geliştirici deneyimini nasıl geliştirdiğini içerir. Kursu kapsar:
- İskele projelerine `npm init vite@en son` gibi CLI seçenekleri
- Vue'nun tek dosya bileşenleriyle Vite kullanma (SFC)
- Vite projelerinde CSS ve Varlıkların İşlenmesi
- Çevre değişkenlerini hata ayıklama ve yapılandırma
***
Öğreticiler ve kaynaklar arasında kapsanan temel konular
- Proje Kurulumu ve Başlatma: `npm kullanma, JavaScript veya TypeScript ve React, Vue veya Svelte gibi çerçeve ön ayarları için iskele projelerine vite@en son oluşturun.
- Geliştirme Sunucusu ve Sıcak Modül Değiştirme (HMR): Vite'ın süper hızlı sunucu başlatmasını ve tam sayfa yeniden yüklemeleri olmadan modülleri güncelleyen verimli sıcak yeniden yüklemeleri anlamak.
- Modül içe aktarma ve kod bölme: Yerel ES modüllerinin ithalat için nasıl kullanıldığı ve bölünmüş kod için dinamik içe aktarma. Egzersizler, talep üzerine dinamik olarak yükleme JavaScript parçaları içerir.
- Stil: CSS içe aktarma, kapsamlı stiller, önişlemciler ve görüntüler ve yazı tipleri gibi varlık işleme için CSS modüllerini kullanarak.
- Çevre Değişkenleri: `.env` dosyalarını kullanarak farklı geliştirme ve üretim ortamlarını yönetmek ve` `ithalat.meta.env` üzerinden değişkenlere erişmek.
- Eklentiler ve Genişletilebilirlik: Mevcut VITE eklentilerinin nasıl kullanılacağı ve dosyaları dönüştürmek veya derleme ve geliştirme aşamaları sırasında işlevselliği genişletmek için özel olanların nasıl oluşturulacağı. Örnekler Markdown Dönüşümü ve Lidasyonu içerir.
- Üretim için bina: Toplama, ağaç çalkalama, minifikasyon ve paketler ile optimizasyonlar.
- Test ve hata ayıklama: Test çerçeveleri ile entegrasyon ve sıcak yeniden yükleme sorunları ile hata ayıklama.
***
Topluluk ve Açık Kaynak Kaynaklar
- GitHub'da harika bir Vite: Vite'a bağlı, öğrenme ve gelişimi zenginleştirebilen şablonlar, eklentiler, kılavuzlar ve araçların küratörlü bir listesi.
- Blog Gönderileri ve Eğiticiler: Birçok geliştirici, VITE'in farklı yığınlar veya mikro-önlükler ve Modül Federasyonu gibi gelişmiş konularla nasıl entegre edilebileceğini belgeleyen blog yayınları aracılığıyla deneyimlerini ve ipuçlarını paylaşıyor.
***
Özet
Vite öğrenen yeni geliştiriciler, aşağıdakileri içeren çok çeşitli öğreticiler ve kaynaklardan yararlanabilir:
- Resmi Vite belgeleri ve temel bilgi rehberi.
- Pratik kullanım ve gelişmiş özelliklerin derinliklerine giren Frontend Masters kursu gibi kapsamlı video kursları.
-Hızlı uygulamalı öğrenme için yeni başlayan dostu YouTube kaza kursları.
- Kurulum, geliştirme iş akışı ve gelişmiş özelleştirmeleri kapsayan Better Stack ve Vue Okulu'ndan yeni başlayanlar ve rehberler.
- VITE'nin yeteneklerini genişletmek için şablonlar, eklentiler ve ipuçları sağlayan topluluk küratörlü kaynaklar.