Öğretici: Yeni Başlayanlar için Vue.js

Vue.jskullanmaya yeni başladıysanız, bu kılavuz bazı temel bilgileri kullanmaya başlamanıza yardımcı olacaktır.

• Vue.js HelloWorld kod deney ortamını deneyin
• Visual Studio Code'da Node.js kullanmayı deneyin

Önkoşullar

• Önce Vue.js, Windows ya da Linux için Windows Alt Sistemiüzerine yüklemelisiniz.

Visual Studio Code ile NodeJS'i deneyin

Henüz sahip değilseniz, VS Code'u yükleyin. Vue'u Windows'da mı yoksa WSL'de mi kullanacağınızdan bağımsız olarak VS Code'u Windows'a yüklemenizi öneririz.

1. Komut satırınızı açın ve yeni bir dizin oluşturun: mkdir HelloVueve ardından dizinini girin: cd HelloVue

2. Vue CLI'yi yükleyin: npm install -g @vue/cli

3. Vue uygulamanızı oluşturun: vue create hello-vue-app

   Vue 2 mi yoksa Vue 3 Önizleme mi kullanacağınızı seçmeniz veya istediğiniz özellikleri el ile seçmeniz gerekir.

   

4. Yeni hello-vue-uygulamanızın dizinini açın: cd hello-vue-app

5. Yeni Vue uygulamasını web tarayıcınızda çalıştırmayı deneyin: npm run serve

   Tarayıcınızda "Vue.js Uygulamanıza Hoş Geldiniz" ifadesini http://localhost:8080 üzerinde görmeniz gerekir. Vue-cli-service sunucusunu durdurmak için Ctrl+C tuşuna basabilirsiniz.

   Uyarı

   Bu öğreticide WSL kullanıyorsanız (Ubuntu ile veya sık kullandığınız Linux dağıtımıyla), kodunuzu VS uzak sunucusuyla çalıştırma ve düzenleme konusunda en iyi deneyimi elde etmek için Uzak - WSL Uzantısı'nın yüklü olduğundan emin olmanız gerekir.

6. Vue uygulamanızın kaynak kodunu VS Code'da açarak karşılama iletisini güncelleştirmeyi deneyin, şunu girin: code .

7. VS Code, Vue uygulamanızı başlatır ve Dosya Gezgini'nde görüntüler. Uygulamanızı terminalde ile yeniden npm run serve çalıştırın ve web tarayıcınızın localhost'ta açık olmasını sağlayın, böylece Vue sayfası karşılama sayfasının görüntülendiğini görebilirsiniz. App.vue Dosyayı VS Code'da bulun. "Vue.js Uygulamanıza Hoş Geldiniz" ifadesini "Ormana Hoş Geldiniz!" olarak değiştirmeyi deneyin. Değişikliğinizi kaydeder kaydetmez Vue uygulamanızın "hot reload" olduğunu görürsünüz.

   Animasyonlu gif değiştirdiğinizde Vue uygulamasının etkin olarak yeniden yüklenmesini

Ek kaynaklar

• Visual Studio Code'da Vue'yu kullanma: Vue söz dizimi vurgulama, IntelliSense, hata ayıklama desteği ve daha fazlasını sağlayan Vetur uzantısı da dahil olmak üzere VS Code ile Vue kullanma hakkında daha fazla bilgi edinin.

• Vue.js belgeleri

• React veya Angular gibi diğer çerçevelerle vue karşılaştırması

• Vue.js genel bakış

• Vue.jsöğrenme yolu ile ilk adımlarınızı atın