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.
1 |
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> |
Ö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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<html> <head> <title>VueJs Cdn</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>VueJs {{ text }}</h1> </div> <script> //vue nesnemizi oluşturup id'si "app" olan div'e eriştik. var app = new Vue({ el:"#app", data:{ text: "İlk Uygulama", } }) </script> </body> </html> |

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.
1 |
node -v |

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:
1 |
npm install -g vue-cli |
Linux ve Mac için:
1 |
sudo npm install -g vue-cli |
Kurulumun tamamlandığını anlamak için aşağıdaki kod satırı ile versiyon kontrolü yapabiliriz.
1 |
vue -V |

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.
1 |
cd desktop\projeler |

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.
1 |
vue create proje-adı |
Ö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.
1 |
vue create vue-ilk-uygulama |

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.
1 |
cd proje-adı |
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.
1 |
cd vue-ilk-uygulama |
Proje klasörümüzün içine girdikten sonra aşağıdaki komutu kullanarak projemizi tarayıcı üzerinde çalıştırabiliriz.
1 |
npm run serve |

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.