Vue.Js Nedir? Vue.Js Kurulumu, Nasıl Kurulur?

Eğer Vue.Js nedir? konusuna hakimseniz, yazının ilk kısımlarını atlayarak, direkt olarak Vue.Js Kurulumu ve Vue.Js Nasıl Kurulur? başlığına atlayabilirsiniz. Kurulumlara Node.Js ile başlayacağımızı da şimdiden belirtmek isterim.

Vue.JS şu anda Front End dünyasında yükselen bir yıldız. Bunun herkes için birçok farklı sebebi olabilir. Şu anda en bilindik 3 Javascript Framework’ü olarak şunları sıralayabiliriz: Vue.js, React.js ve de Angula.js. Bunlar haricinde elbette birçok Framework sayabiliriz; Ember.js, Meteor, Mithril, Polymer, Aurelia, Backbone.js… Bunların hepsi de birer ihtiyaç sonucunda ortaya çıktı ve bunun sonucunda da bunları kullananların olması çok normal. Öncelikle bir projeye başlarken “ihtiyaçlarımız nedir?” sorusuna yanıt vermeniz gerekiyor. Sonrasında da bu ihtiyaçlarınıza hangi Pluginler, Framework ya da Frameworkler karşılık veriyor bunu bulmalısınız. Çünkü, sadece popüler diye bir yapıya yönelirseniz, sonrasında çok pişman olabilirsiniz.

Angular 1’den Angular 2’ye geçerken köklü bir değişiklik olması sonrasında birçok kullanıcı Angular’dan uzaklaştı ve sonrasında farklı şeyler aramaya başladı. Bu Angular’ın popülerliğine önemli oranda zarar verdi ve düşüşünü hızlandırdı. Şu anda yeni bir projeye başlarken artık en fazla Vue.js ve React.js seçiliyor diyebilirim.

NPM Trends sitesinin paylaştığı verilerde de görüldüğü üzere Vue, Angular’a göre daha iyi bir yükseliş yakalamış diyebiliriz. Ancak, React ile ilgili paketler çok daha fazla indirilmiş. Neden? Çünkü çok daha fazla kaynağa sahip olduğu için daha fazla indirilmesi normal olabilir. Ayrıca, Facebook’un da (Facebook, Instagram ve niceleri…) React’in arkasındaki güç olduğunu unutmamak gerekiyor.

ReactJs – VueJs – Angular Github İstatistikleri

Peki Github ne diyor? Yaklaşık aynı zamanlarda ortaya çıkmalarına rağmen Vue.JS, React’tan daha fazla yıldıza (stars) sahip. Bu da gösteriyor ki Vue.Js’i kullanan ve beğenen Github kullanıcısı daha fazla. Bence bu güzel bir istatistik ve dikkat edilmesi gerekiyor. Facebook’un React’in arkasında durmasına karşılık, bağımsız ya da bireysel yazılım geliştiricilerin takdirini kazanmış bir Vue.Js var.

React’in ardında Facebook gibi bir dev var, peki ya Vue’nun? Evan You adlı bir geliştiricinin ortaya attığı bir proje ancak Vue topluluğu çok hızlı büyüyor. Mesela Çin’de çok fazla kullanılıyor. Çünkü bunun sebebi Evan You bir Çinli ve Asya’da Vue’nın hızla yayılmasını kolaylaştırdı. Vue topluluğu ve bir gün Evan ölürse ne olacak? Vue sahipsiz mi kalacak konusuna başka bir yazıda gireceğim ancak sahipsiz kalmayacağını söylemem gerekiyor :)

Vue.js Belgeseli

Vue.js ile ilgili bir belgesel çekilmiş olması size de ilginç gelmiş olabilir :) Ancak artık bir gelseli de var… Aşağıdaki videoyu izledikten sonra Vue’yu daha da fazla seveceğinizden şüphem yok. (Belgesel İngilizce’dir. İngilizce alt yazılı izleyebilirsiniz.)

Evan You Kimdir?

Google’ın keşfettiği ve kreatif işler yapan ekibine dahil ettiği bir yazılım geliştirici olan Evan You, Google’da Angular.js üzerine de geliştirmeler yapıyordu ve birçok projesinde AngularJs kullandı. Bu nedenle de Angular’ın neredeyse tüm dezavantajlarını biliyordu. Bunun sonucu olarak Angular’a kıyasla daha iyi, daha hızlı ve az boyuta sahip bir ürün çıkartmaya karar verdi. (Farkındaysanız React’e karşı değil, Angular’a karşı bu fikirde çünkü React ile neredeyse aynı zamanlarda piyasaya çıktılar. Bu sürede henüz React piyasada yok.) Aklında “Eğer Angular’ın sevdiğim kısmını çıkarabilir ve gerçekten hafif bir şey inşa edebilirsem…” fikri vardı ve 2014’ün Şubat ayında Vue.JS yayınlandı.

Vue.Js Nedir?

Vue.js (genellikle Vue olarak kullanılır) kullanıcı arayüzleri ve tek sayfa uygulamalar (single-page applications) inşa etmek için kullanılan açık kaynak Javascript iskeleti. (Wikipedia)

Node.js Kurulumu

Vue.Js kurulumu öncesinde bilgisayarınıza Node.js kurmanız gerekiyor. Daha sonradan sıkça karşılacağınız npm … ifadesi de Node.js’ten geliyor olacak.

Node.js’in son stabil sürümünü https://nodejs.org/ adresinden indirebilirsiniz. Solda yer alan LTS versiyonunu indirmeniz tavsiye edilmektedir çünkü Current (current / şu anki stabil değildir ve geliştirmelere devam edilmektedir.)

Kurulumun başarıyla tamamlandığından emin olmak isterseniz, command line’ı açarak (Başlat > Çalıştır > cmd)

npm -v

node -v

kodlarını yazabilirsiniz.

Vue.JS Nasıl Kurulur?

Sıra geldi Vue.JS kurulumuna. Alt kısımdaki kodu yazarak kuruluma başlayabilirsiniz.

npm install -g @vue/cli

Ardından alt kısımdaki kodu yazarak kurulumun yapıldığından emin olabilirsiniz.

Görüldüğü üzere benim bilgisayarımda şu anda Vue/Cli 4.5.6 sürümü kuruluymuş. Kodu çalıştırdıktan sonra Vue.Js’i update etmiş oldum ve sürümüm 4.5.7 oldu.

Vue.Js Proje Oluşturmak

Vue.js’te proje oluşturmak için 2 farklı alternetifi kullanabilirsiniz. Ben neredeyse her zaman ilk alternatifi kullanıyorum.

1-) Projenizi oluşturmak istediğiniz klasöre giderek adres satırına cmd yazıp entera basabilirsiniz.

2-) Direkt cmd ya da Terminal İle Vue.Js Proje Oluşturmak

Bilgisayarınızdan Başlat > Çalıştır > cmd yazıp komut satırını başlatabilirsiniz. Ayrıca, Visual Studio Code veya benzeri bir Text Editor kullanıyorsanız da Terminal kısmından da komut ekranını açabilirsiniz. Bundan sonrası iki alternatif için de aynı olarak devam edecek. Sadece 2. alternatifi kullanıyorsanız, cd klasör veya cd.. ile hareket ederek projeyi oluşturmak istediğiniz klasöre ulaşıp projenizi oluşturmaya başlayabilirsiniz. Bu ekrandaki komutları kullanmayı bilmiyorsanız, ilk alternatif sizin için daha kolay olacaktır.

Gelen ekranda

vue create projeadi

yazdığınızda karşınıza şöyle bir ekran gelecek. (Proje adınızda büyük harf kullanırsanız uyarı alırsınız. Projenin tüm harfleri küçük olmalıdır.)

Görüldüğü üzere 3 farklı seçenek var, gelin bunlar nelermiş görelim.

• Default (Vue2, babel, eslint): Anlaşılacağı üzere varsayılan proje şablonudur. Enter’a basarak detaylı ayar yapmaya gerek kalmadan projenizi oluşturabilirsiniz.
• Default (Vue3, babel, eslint): Bir üstteki ile aynı olmakla birlikte, şu anda Vue3 stabil sürüm olmadığı için tavsiye etmiyorum. Öyle ki birçok Vue.js pluginine bu sürümde ulaşamayabilirsiniz ya da sorunlar yaşayabilirsiniz.
• Manually select feautures: Burada tüm seçimleri biz yapıyoruz. Öyle ki şimdi bunu seçip ilerleyeceğiz ve hangi özellikleri seçme hakkımız varmış daha iyi görmüş olacağız.

Ok tuşlarıyla hareket edip space / boşluk tuşu ile seçim yapabilirsiniz. Tercihleriniz bittikten sonra Enter’a basarak bir sonraki aşamaya geçebilirsiniz.

Ben burada Vuex ve Router’ı seçiyorum.

Vuex detaylı bir konu olduğu için bunu sonraya bırakıyorum ama yine de kurcalamak sizin için güzel bir tecrübe olacaktır.

Router ise domain.com/sayfa1 ve domain.com/sayfa2 gibi yeni URL’ler oluşturmanıza yarayacak.

Vue.JS İlk Projemizi Oluşturduk

Evet, işte bu kadar ilk projemizi oluşturduk. Çok kolay değil mi?

Vue.Js Projesini Ayağa Kaldırmak

Son 2 satırda söylediği gibi 2 kodu arka arkaya yazacağız.

İlk satırdaki cd mustafacagrivueproje ile projemizin oluşturulduğu klasöre gidiyoruz. Ardından da npm run serve komutu sayesinde bu klasörde yer alan Vue.js projemizi ayağa kaldırıyoruz.

Evet, karşınıza şöyle bir ekran gelecek:

Burada belirtilen 2 farklı URL’de aynı yere gidecektir. Tarayıcınıza http://localhost:8080/ yazarak ilk projemize ulaşabiliriz.

İşte bu kadar. Muhtemelen yaklaşık 30 dakikada bir Vue.Js projesini oluşturabileceğinizi görmüş oldunuz :) Vue.js ile birlikte hızlı ve kolay bir şekilde front end geliştiricisi olabilirsiniz. Sonraki yazılarda da bunu daha iyi anlayacaksınız.

Bu yazıda basit bir şekilde Vue.JS nasıl kurulur ve proje nasıl oluşturulur konularına değinmiş olduk. Bir sonraki derste bu sayfanın nasıl ve nelerden oluştuğuna değineceğiz. Görüşmek üzere.