Yazılım

Vue.js Proje Oluşturma – Cdn – Vue-Cli – İlk Uygulama

tarafından yazıldı Mehmet Ali Ayvaz

Oldukça popüler bir Javascript frameworkü olan VueJs, cdn ile nasıl kullanılır, Vue-Cli ile proje nasıl oluşturulur, bu yazımızda bunlara bakacağız.

VueJs Nedir?

VueJs Evan You tarafından geliştirilen, her geçen gün daha da popülerleşen bir javascript frameworküdür. Çeşitli web uygulamaları geliştirmek için VueJs kullanabilirsiniz. Bu linkten resmi dokümantasyonuna ulaşabilirsiniz.

VueJs Cdn Kullanımı

VueJs’i direk Cdn’i dahil ederek kullanmaya başlayabilirsiniz. Dokümantasyonundaki cdn adresini index.html dosyamızdaki “head” taglarımızın içine dahil edelim.

Öncelikle id’si “app” olan bir div oluşturalım. Vue nesnemiz ile bu divi yöneteceğiz. Daha sonra “body” tagımızı kapatmadan hemen önce “script” taglarımızı açarak Vue nesnemizi yaratalım.

VueJs Cdn Kullanımı

Vue nesnemizi oluşturdukran sonra “el” özelliği ile id’si app olan div’e eriştik. Data kısmında tuttuğumuz verileri uygulamamızın içerisinde kullanabiliriz.

Html kodlarımızın içinde Vue nesnemizin datasındaki bir veriyi görüntülemek için çift süslü parantez kullanacağız. Yukarıdaki örneği inceleyebilirsiniz.

Vue nesnemizin datasında tuttuğumuz verilere daha farklı yollarla da erişebiliriz. Bunun için Vue.js Directive Kullanımı adlı yazımızı inceleyebilirsiniz. VueJs directive’leri ile farklı yollar ile dataya erişebilirsiniz.


Vue-Cli Kurulumu

Büyük projeler geliştirirken cdn yeterli olmayabilir. Büyük projeler için Vue-Cli kullanabilirsiniz. Vue-Cli sizlere bir geliştirme ortamı sunar. Böylece projeye hazırlık yaparken çeşitli araçları sizin yerinize hazırlar.

Öncelikle bilgisayarınızda node.js kurulu olması gerekmektedir. Buradaki linkten size uygun node.js versiyonunu bilgisayarınıza indirip kurabilirsiniz.

Node.js kurulumunu yaptıktan sonra terminal ekranımızı açalım. Buradan versiyon kontrolü yaparak kurulumun tamamlandığını anlayabiliriz. Bunun için şu kodu kullanalım.

NodeJs Versiyon Kontrolü

Gördüğünüz gibi NodeJs bilgisayarımızda kurulu.

Şimdi yapmamız gereken global olarak Vue-Cli’yı kurmaktır. Bunun için aşağıdaki satırlardan kendi işletim sisteminize uygun olanı terminalimize yazıyoruz.

 

Windows için:

Linux ve Mac için:

Kurulumun tamamlandığını anlamak için aşağıdaki kod satırı ile versiyon kontrolü yapabiliriz.

Vue-Cli Versiyon Kontrolü

Gördüğünüz gibi kurulum sorunsuz bir şekilde tamamlandı.

 

Vue-Cli Kullanarak Proje Oluşturmak

Vue-Cli’yı global olarak bilgisayarımıza kurduk. Global kurduğumuzdan dolayı Vue-Cli’a  bilgisayarımızın her yerinden erişebiliriz. Şimdi ise projemizi oluşturmak için projemizi kuracağımız dizine gidelim.

Bir dizinden başka bir dizine geçmek için “cd” yazıp boşluk bırakıyoruz. Daha sonra dizin adresimizi yazıyoruz. Örnek olarak masaüstündeki projeler klasörünün içine gitmek istiyoruz diyelim. Aşağıdaki resimde gördüğünüz gibi cd yazıp gideceğimiz dizini belirttik.

Cmd Dizin Değiştirme

Projeyi oluşturacağımız dizine geldik. Vue-Cli projesi oluşturmak için aşağıdaki komut satırını kullanacağız. Proje-adı yerine, projenize ne ad vermek istiyorsanız onu yazın.

Örnek olarak bu dizinde “vue-ilk-uygulama” adında bir proje oluşturalım. Bunun için yazacağımız komut satırı böyle olmalıdır.

Vue 2 Kurulum

Yukarıdaki satırı çalıştırdıktan sonra bize hangi sürümü kuracağımızı soracaktır. İstersek hazır bir sürüm seçerek bizim için kurulumu gerçekleştirecektir. İstersek de manuel seçeneğini seçerek hangi araçları kuracağımıza kendimiz karar verebiliriz.

Şuan için Vue 2 sürümünü seçip kurulumu gerçekleştirebiliriz.

Proje bulunduğumuz dizine oluşturuldu. Projeyi tarayıcıda çalıştırmak için proje klasörünün içine girmeliyiz. Bunun için aşağıdaki komutu kullanabiliriz.

Bizim projemizin adı “vue-ilk-uygulama” olduğu için  biz bu satırı kullandık. Siz de projenizin adı neyse “proje-adı” kısmına onu yazarak proje klasörünüzün içine girebilirsiniz.

Proje klasörümüzün içine girdikten sonra aşağıdaki komutu kullanarak projemizi tarayıcı üzerinde çalıştırabiliriz.

VueJs Projeyi Çalıştırmak

Gördüğünüz gibi “http://localhost:8080” adresinde projemiz çalıştırıldı. Bu adrese gidince bizleri default Vue template’i karşılıyor olacaktır.

Network kısmındaki adres ise aynı wifi ağına bağlı cihazlar tarafından isteğe bağlı kullanılacak adrestir. Yani siz bilgisayarınız üzerinden projeyi çalıştırmış olsanız bile, telefonunuz aynı wifi ağına bağlıysa bu adrese girerek tarayıcıda projeyi görüntüleyebilirsiniz.

Vue Localhost

Bu yazımızda VueJs Cdn kullanımını ve Vue-Cli kurulumunu gördük. VueJs ile basit örnekler yapmak istiyorsanız Vue.js Directive Kullanımı adlı yazımızı inceleyebilirsiniz.

Yazar Hakkında

Mehmet Ali Ayvaz

Kurgu ve tasarımla uzun süre ilgilendikten sonra yazılımla bu serüveni devam ettiriyorum. İnsanlara faydalı olabilecek içerikler hazırlama uğraşındayım.

Yorum Yap