Çarşamba 25 Ocak 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. Arayüz
  3. Yeni Başlayanlar İçin Vue.js Nedir?
 Yeni Başlayanlar İçin Vue.js Nedir?
Arayüz Başlarken Framework Güncel

Yeni Başlayanlar İçin Vue.js Nedir?

Yazar : Sevim Selin Özsoy 21 Şubat 2022 0 Comment

İçindekiler

  • Vue.js Nasıl Yüklenir?

    • CDN İle Vue.js Yüklemek

    • NPM Kullanarak Vue.js Yüklemek

  • Yeni Bir Proje Oluşturmak

    • GUI Kullanarak Proje Oluşturma

Vue.js çoğunlukla kullanıcı arayüzü geliştirmek için, bazı durumlarda da var olan HTML dosyasının özelliklerini geliştirmek için kullanılabilen modern bir JavaScript kütüphanesidir. Standart HTML, CSS ve JavaScript dosyalarını kullanılarak inşaa edilir ve component temelelli modeli sayesinde etkili kullanıcı arayüzleri oluşturmanuza olanak sağlar.

Yukarıdaki örnek çalıştırıldığında sonuç ‘Count is: 0’ olacaktır.

Sadece HTML’i geliştirmekle kalmayıp, tek sayfa uygulamaları da Vue ile yazabilirsiniz; bu şekilde bütün markup Vue tarafından kontrol edilir ve performans, karışıklık gibi sorunlar ortadan kalkmış olur. Ayrıca client-side yönlendirmeleri ve state yönetiminde kütüphanelerden yararlanabilirsiniz. Kütüphaneler Vue’nun içinde gömülü olmadığından dolayı uygulamanızın ihtiyaçlarına ve yapılarına göre farklı kütüphane seçeneklerinden istediğinizi kullanabilirsiniz.

Birçok framework gibi Vue’da tekrardan kullanılabilir bloklar oluşturmanıza olanak sağlar. Vue blokları genellikle özel bir HTML syntax’ı kullanarak yazılırlar, HTML’in yetersiz kaldığı yerlerde ise JSX veya normal JavaScript kullanarak bloğunuzu özelleştirebilirsiniz. Üstelik bunların hepsini tek dosya içerisinde gerçekleştirebilirsiniz. Bu tip dosyalara SFC yani Single-File Component (Tek-Dosya Component) adı verilir. Vue SFC’leri, component’ın mantığını (JavaScript), şablonunu (HTML) ve stilini tek bir dosya içerisinde aşağıdaki gibi içerir.

Vue.js Nasıl Yüklenir?

Sitenizde Vue kullanmak için iki şekilde yükleme yapmak mümkün.

CDN İle Vue.js Yüklemek

  • Geliştirme Script’i (Optimize değil fakat konsol uyarıları içerir.)
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  • Üretim Script’i (Optimize versiyon, detaysız konsol uyarıları. Bu scripti yüklerken gelen yeni güncellemelerin sitenizde bozukluğa yol açmaması için versiyon numarası belirtmeniz önerilir)
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

CDN kullanarak yükleme yapmanın bazı kısıtlamaları vardır. Eğer karmaşık uygulamalar oluşturmak ve kütüphaneler kullanmak isterseniz, CDN ile yükleme yağtığınız takdirde bu tip özellikleri kullanamazsınız.

NPM Kullanarak Vue.js Yüklemek

Npm kullanarak yükleme yaptığınız takdirde, projenizde Vue’nun gelişmiş özelliklerini ve WebPack gibi bundlerlar kullanabilirsiniz. Uygulamaları daha kolay oluşturabilmeniz ve kontrol edebilmeniz için CLI komutlarını ve npm paketini yükleyebilmeniz için öncelikle bilgisayarınıza Node.js yüklemeniz gerekiyor.

Node.js yüklemesini yaptıktan sonra; win+r tuşlarına bastığınızda çıkan pencerede cmd.exe yazarak Command Line‘ı açmalısınız.

Açılan pencerede;

npm install --global @vue/cli

yazarak Vue.js’i bilgisayarınıza indirebilirsiniz.

Yeni Bir Proje Oluşturmak

Cmd ekranında projeyi oluşturmak istediğiniz dizine cd komutu ile gidin.

vue create komutunu kullanarak projenizi oluşturun.

vue create hello-world

Ardından önünüze bir takım seçenekler gelecek.

CLI preview

İsterseniz default seçeneğini seçerek temel Babel + ESLint presetini kullanabilirsiniz veya “Manually select features seçeneği ile ihtiyacınıza göre projenizi yapılandırabilirsiniz.

Defualt seçenek yeni bir uygulama için hızlıca prototip oluşturmanıza yararken, manual olarak projenizi oluşturmanız ürün odaklı ihtiyaçlarınız için size daha çok yapılandırma seçeneği sunar.

CLI preview

Eğer Manually seçeneğini seçerek bir uygulama oluşturursanız, oluşturduğunuz uygulamayı preset olarak kaydedip sonraki uygulamalarınızda kullanabilirsiniz.

~/.vuerc

Kaydedilen presetler .vuerc isimli JSON dosyaları şeklinde kullanıcının ana dizinine kaydolur.

Vue create komutunun seçebileceğiniz farklı seçenekleri de mevcut. Bu seçenekleri görüntülemek için:

vue create --help

komutunu çalıştırmalısınız.

Usage: create [options] <app-name>

create a new project powered by vue-cli-service


Options:

  -p, --preset <presetName>       Skip prompts and use saved or remote preset
  -d, --default                   Skip prompts and use default preset
  -i, --inlinePreset <json>       Skip prompts and use inline JSON string as preset
  -m, --packageManager <command>  Use specified npm client when installing dependencies
  -r, --registry <url>            Use specified npm registry when installing dependencies
  -g, --git [message|false]       Force / skip git initialization, optionally specify initial commit message
  -n, --no-git                    Skip git initialization
  -f, --force                     Overwrite target directory if it exists
  --merge                         Merge target directory if it exists
  -c, --clone                     Use git clone when fetching remote preset
  -x, --proxy                     Use specified proxy when creating project
  -b, --bare                      Scaffold project without beginner instructions
  --skipGetStarted                Skip displaying "Get started" instructions
  -h, --help                      Output usage information

GUI Kullanarak Proje Oluşturma

Proje oluştururken ve düzenleme yaparken Vue’nun sağladığı kullanıcı arayüzünü de kullanabilirsiniz.

vue ui

Yukarıdaki komut internet tarayıcınızda projenizi oluşturmanızı sağlayan GUI ile birlikte açılmasını sağlar.

UI preview

Başlangıç seviyesinde Vue.js ile ilgili size aktaracağımız bilgiler şimdilik bu kadardı! Sizce Vue.js kullanmak ne kadar mantıklı? Görüşlerinizi bizlerle yorumlar kısmında paylaşmayı unutmayın! Keyifli kodlamalar, görüşmek üzere!

Etiketler: framework vue.js yazılım
Önceki Yazı
Sonraki Yazı

Sevim Selin Özsoy

editor

Süleyman Demirel Üniversitesi 4. sınıf bilgisayar mühendisliği öğrencisiyim. Front-end yazılımla ve tasarımla ilgileniyorum. Aktif olarak Süleyman Demirel Üniversitesinin bilgi işlemde part-time yazılımcı ve tasarımcı olarak çalışıyorum. Aynı zamanda da Webmaster Kitchen'da sosyal medya yöneticiliğini ve tasarımcılığını yapıyorum.

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.