Vue CLI ve özel bileşenlere giriş

  • 1 dakika

Tek bir JavaScript dosyasında vue.js uygulamasının tamamını oluşturmak mümkün olsa da, en küçük uygulamalar dışında tüm uygulamalarda yönetilemez hale gelir. Vue, uygulamanızın daha küçük birimlere ayrılmasını desteklemek için bileşenler oluşturmanıza olanak tanır. Bileşenler, uygulamanızı oluşturabileceğiniz yeniden kullanılabilir yapı taşlarıdır.

Bileşenler JavaScript dosyaları olarak veya .vue uzantısına sahip tek dosyalı bir bileşen aracılığıyla oluşturulabilir. Tek dosyalı bileşenler, tarayıcıların okuyamadığını özel bir söz dizimi kullanır. Bu söz dizimi uygun JavaScript, HTML ve CSS'ye dönüştürülmelidir. Özelleştirilmiş söz dizimini tarayıcının okuyabileceği bir şeye dönüştürme işlemi paketleme olarak adlandırılır ve webpack gibi ek araçlar gerektirir.

Neyse ki Vue, bir uygulamayı önyüklemek için kullanabileceğiniz bir komut satırı arabirimi (CLI) de sağlar. CLI, paketleyici ve geliştirme sunucusu da dahil olmak üzere tüm gerekli araçları yapılandırıyor.

Bu modülde şunların nasıl yapıldığını keşfedeceğiz:

  • Uygulama oluşturmak için Vue CLI kullanın.
  • Tek dosyalı bileşenler oluşturun.
  • Değerleri bileşenlere geçirmek için props kullanın.

Ön koşullar:

  • Vue.js hakkında temel bilgiler
  • HTML ve CSS bilgisi
  • JavaScript bilgisi
  • Vue.js yönergeleri hakkında bilgi
  • Visual Studio Code
  • Node.js

Dekont

Bu modülün çözüm kodunu almak için, bir komut veya terminal penceresinde aşağıdaki komutu çalıştırarak depoyu kopyalayabilirsiniz:

git clone https://github.com/MicrosoftDocs/mslearn-vue-components
cd mslearn-vue-components/end
code .