Vue.js Nedir?
Vue.js, açık kaynaklı bir JavaScript framework’üdür. Diğer popüler framework’ler gibi, Vue.js de dinamik, interaktif ve verimli web uygulamaları geliştirmeyi sağlar. Ancak Vue, basitliği ve öğrenme eğrisinin nispeten düşük olmasıyla tanınır. Yani, Vue.js ile hemen başlayabilir, projelerinizi hızla hayata geçirebilirsiniz.
Adım 1: Vue CLI'yi Kurma
Vue.js ile çalışmaya başlamak için, ilk adım Vue CLI'yi (Command Line Interface) kurmaktır. Vue CLI, Vue.js uygulamaları oluşturmayı çok daha kolay hale getiriren güçlü bir araçtır. Bunu kurmak için bilgisayarınızda Node.js'in yüklü olması gerektiğini unutmayın. Eğer Node.js'i henüz yüklemediyseniz, [Node.js'in resmi web sitesinden](https://nodejs.org/) indirip kurabilirsiniz.
Vue CLI'yi kurmak için terminali açın ve şu komutu girin:
npm install -g @vue/cli
Bu komut, Vue CLI'yi global olarak bilgisayarınıza yükler.
Adım 2: Yeni Bir Vue Projesi Oluşturma
Vue CLI kurulduktan sonra, yeni bir Vue projesi oluşturmak için aşağıdaki komutu kullanabilirsiniz:
vue create my-vue-project
Burada `my-vue-project` yerine, projene istediğin herhangi bir isim verebilirsin. Bu komut, Vue projenin temel yapı taşlarını oluşturacak ve bazı yapılandırma seçenekleri sunacaktır. Eğer Vue'nun varsayılan ayarlarını kullanmak istersen, sadece "Enter" tuşuna basabilirsin.
Adım 3: Projeyi Başlatma
Proje oluşturulduktan sonra, artık projeyi başlatabiliriz. Terminalde şu komutu kullanarak geliştirme sunucusunu çalıştırabilirsin:
cd my-vue-project
npm run serve
Artık terminalde bir URL (genellikle `http://localhost:8080/`) görmelisin. Bu linki tarayıcında açarak Vue projenin çalıştığını görebilirsin. Evet, işte Vue.js ile kurduğun ilk frontend projen hazır! :)
Adım 4: Vue ile Çalışmaya Başlamak
Projeni kurduktan sonra, Vue.js ile çalışmaya başlamak için şu temel dosyalara göz atalım:
1. `src/App.vue`: Vue bileşenleri burada yer alır. Bu dosya, temel uygulama bileşeninizi içerir.
2. `src/main.js`: Vue uygulamanızı başlatan dosya burasıdır. `Vue` bileşenini başlatır ve uygulamanın kökünü oluşturur.
3. `public/index.html`: Uygulamanın temel HTML yapısı buradadır. Vue bileşenleri burada yüklenir.
Vue bileşenleri (ya da component’ler), Vue.js’in en güçlü özelliklerinden biridir. Bileşenler, HTML, JavaScript ve CSS’i bir arada kullanmanıza olanak sağlar. Hadi şimdi basit bir bileşen oluşturalım.
{{ message }}
Vue.js ile ilk bileşeninizi oluşturdunuz!
Yukarıdaki kod, Vue bileşenin temel yapısını gösteriyor. ``, HTML kısmını içeriyor, `