Vue.js Nedir? Nasıl Kurulur? Vue.js İle Proje Nasıl Oluşturulur?

Bu yazımızda bir Javascript frameworkü olan Vue.js i tanıtacağız. Vue.js in tarihçesinden bahsedip, nasıl kurulacağını gösterecek ve ilk Vue.js projemizi oluşturacağız.

Vue.js, kullanıcı arayüzleri ve tek sayfa uygulamalar (single-page applications / SPA) inşa etmek için kullanılan açık kaynaklı Javascript frameworküdür.

2014 yılında Evan You tarafından piyasaya çıkarılmıştır ve şu anda güncel sürüm olarak 3.x versiyonu kullanılmaktadır.

Vue.js i projeşerimizde kullanabilmek için ya sistemizde kurulu olması gerekmekte yada CDN dosyaları import edilmelidir.

CDN ile kurulum yapmadan geliştirme yapmak için aşağıdaki CDN linkini index.html dosyasına eklemeniz yeterli olacaktır.


script src="https://unpkg.com/vue@next"


Vue.js ile büyük ölçekli uygulamalar oluştururken önerilen yükleme yöntemi npm’dir. Nmp i kullanarak Vue.js i bilgisayarınıza kurabilir ve cdn kullanmadan her an proje geliştirmeye hazır hale getirebilirsiniz.

Npm ile Vue.js i kurabilmek için öncelikle Node.js in bilgisayarımızda kurulu olması gerekmektedir. Node.js i bilgisayarımıza yüklemek için https://nodejs.org/en/download/ adresine girerek işletim sistemimize uygun bir LTS sürümünü indirip kurmamız gerekmektedir.

Node.js kurulumu bittikten sonra sıra bilgisayarımıza Vue yu kurabiliriz.

npm install -g vue@next

yazarak kuruluma başlayabiliriz. Buradaki -g ifadesi global olarak adlandırılır.

Ardından Vue yu komut satırı üzerinden kullabilmek için Vue/CLI ı yüklememiz gerekmektedir. Bunun için,
npm install -g @vue/cli

komutunu yazıp çalıştırabiliriz.

Kurulumlarımız tamamlandı. Şimdi projemizi oluşturmaya başlayabiliriz.

Eğer komut satırında aşağıdaki hatayı alırsanız

Windows da Powershell i yönetici olarak çalıştırıp

Set-ExecutionPolicy RemoteSigned

yazıp A tuşuna basıp Enter demeniz yeterli olacaktır.

Vue da proje oluşturmak için 2 yöntem vardır. Biri direkt vue/cli üzerinden oluşturulurken, diğeri ise UI ekranı üzerinden oluşturulabilir.

Yeni bir proje oluşturmak için aşağıdaki adımları takip edebilirsiniz,

1. vue create first_project
2. Şimdilik Default (Vue 3) ü seçip devam edelim. Eğer daha fazla özelleştirme isterseniz Manually select features i seçip devam edebilirsiniz.
3. Ok tuşları ile Default (Vue 3) ün üzerinde gelip Enter a basıyoruz.
4. cd first_project diyerek proje klasörünün içine girelim
5. npm run serve diyerek projemizi çalıştıralım.

Yeni bir proje oluşturmak için aşağıdaki adımları takip edebilirsiniz,

1. Komut satırına vue ui yazınız.
2. Komut çalıştıktan sonra otomatik olarak bir tarayıcı ekranı açacak.
3. Burada üç adet sekme görülmektedir.
   • Projeler sekmesinde daha önceden oluşturmuş projelerinizi görünür.
   • Oluştur sekmesinde yeni bir proje oluşturabilirsiniz.
   • İçe aktar sekmesinde ise önceden oluşturduğunuz anca UI ekranında görünmeyen projenizi içe aktarabilir ve yönetebilirsiniz.
4. Oluştur sekmesine girdiğimizde üst tarafta bulunduğunuz dizin yolu gözükmektedir.
5. Alt tarafta Yeni Proje Oluştur butonuna tıklayalım.
6. Proje ismini girip, paket yöneticisini seçiniz. Eğer bir Git reposuna bağlamak isterseniz bağlayabilirsiniz.
7. Şablonumuzu seçerek projemizi oluşturabiliriz.
8. Proje kurulumu tamamlandı. Sol menüden dilerseniz projeniz için eklenti yada bağımlıklıkları kurabilirsiniz.
9. Yine sol taraftaki Görevler menüsünden projemizi çalıştırabiliriz.

Youtube kanalımızdan bizleri takip edebilirsiniz.

TEKNOKODİ