{"id":38818,"date":"2026-02-08T13:41:28","date_gmt":"2026-02-08T10:41:28","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=38818"},"modified":"2026-02-08T13:41:28","modified_gmt":"2026-02-08T10:41:28","slug":"vue-nedir-ve-neden-kullanmaliyiz","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-nedir-ve-neden-kullanmaliyiz\/","title":{"rendered":"Vue Nedir ve Neden Kullanmal\u0131y\u0131z?"},"content":{"rendered":"

<\/p>\n

Web geli\u015ftirme d\u00fcnyas\u0131 s\u00fcrekli evriliyor ve bu dinamik ortamda geli\u015ftiricilerin i\u015flerini kolayla\u015ft\u0131ran, verimli ve esnek ara\u00e7lara olan ihtiya\u00e7 her ge\u00e7en g\u00fcn art\u0131yor. Bu ara\u00e7lardan biri de modern ve performans\u0131 y\u00fcksek kullan\u0131c\u0131 aray\u00fczleri (UI) olu\u015fturmak i\u00e7in kullan\u0131lan a\u015famal\u0131 (progressive) JavaScript \u00e7er\u00e7evesi Vue.js’dir. Bu rehberde, Vue.js’e yeni ba\u015flayanlar i\u00e7in temel kavramlar\u0131, bir Vue projesi olu\u015fturma ad\u0131mlar\u0131n\u0131 ve ana \u00f6zelliklerini detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n

Amac\u0131m\u0131z, bu rehberi tamamlad\u0131\u011f\u0131n\u0131zda kendi Vue projelerinizi ba\u015flatabilecek, temel bile\u015fenleri olu\u015fturabilecek ve Vue’nun sundu\u011fu avantajlar\u0131 kullanarak interaktif web uygulamalar\u0131 geli\u015ftirebilecek seviyeye gelmenizdir.<\/p>\n

Vue Nedir ve Neden Kullanmal\u0131y\u0131z?<\/h2>\n
Vue.js, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan\u0131lan a\u00e7\u0131k kaynakl\u0131 bir JavaScript \u00e7er\u00e7evesidir. Evan You taraf\u0131ndan geli\u015ftirilen ve s\u00fcrekli b\u00fcy\u00fcyen g\u00fc\u00e7l\u00fc bir toplulu\u011fa sahip olan Vue, \u00f6\u011frenme e\u011frisinin d\u00fc\u015f\u00fckl\u00fc\u011f\u00fc, esnekli\u011fi ve performans\u0131 ile \u00f6ne \u00e7\u0131kar. “A\u015famal\u0131 \u00e7er\u00e7eve” olarak tan\u0131mlanmas\u0131n\u0131n nedeni, projenizin ihtiyac\u0131na g\u00f6re k\u00fc\u00e7\u00fck bir interaktif bile\u015fenden, tek sayfal\u0131k karma\u015f\u0131k bir uygulamaya (SPA – Single Page Application) kadar her \u00f6l\u00e7ekte kullan\u0131labilmesidir.<\/p>\n

Vue’nun Ba\u015fl\u0131ca Avantajlar\u0131:<\/h3>\n

A\u015famal\u0131 \u00d6\u011frenme ve Esneklik:<\/strong> Vue, mevcut projelerinize kolayca entegre edilebilir. Sadece k\u00fc\u00e7\u00fck bir b\u00f6l\u00fcm\u00fc i\u00e7in Vue kullanmaya ba\u015flayabilir, zamanla kapsam\u0131n\u0131 geni\u015fletebilirsiniz. HTML, CSS ve temel JavaScript bilginiz varsa, Vue’yu \u00f6\u011frenmeniz olduk\u00e7a h\u0131zl\u0131 olacakt\u0131r.<\/li>\n
Performans ve Verimlilik:<\/strong> Sanal DOM (Virtual DOM) kullanarak performans\u0131 optimize eder. Sadece de\u011fi\u015fen k\u0131s\u0131mlar\u0131 g\u00fcncelleyerek taray\u0131c\u0131 \u00fczerinde daha h\u0131zl\u0131 tepki veren uygulamalar olu\u015fturman\u0131za olanak tan\u0131r.<\/li>\n
Kapsaml\u0131 Ekosistem:<\/strong> Vue Router (y\u00f6nlendirme), Vuex (durum y\u00f6netimi), Vue CLI (proje olu\u015fturma ve y\u00f6netimi) gibi resmi ara\u00e7lar ve k\u00fct\u00fcphanelerle birlikte gelir. Bu da b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar geli\u015ftirirken size sa\u011flam bir temel sunar.<\/li>\n

Harika Dok\u00fcmantasyon ve Topluluk:<\/strong> Vue’nun dok\u00fcmantasyonu son derece anla\u015f\u0131l\u0131r ve detayl\u0131d\u0131r. Geni\u015f ve aktif toplulu\u011fu sayesinde kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z sorunlara h\u0131zl\u0131ca \u00e7\u00f6z\u00fcm bulabilirsiniz.<\/li>\n<\/ul>\n
Vue Projesi Olu\u015fturma ve Temeller<\/h2>\n
Vue ile geli\u015ftirme yapmaya ba\u015flamadan \u00f6nce, bilgisayar\u0131n\u0131zda baz\u0131 ara\u00e7lar\u0131n kurulu olmas\u0131 gerekmektedir. En temel gereksinim Node.js ve npm (Node Package Manager) veya Yarn’d\u0131r. Bunlar, JavaScript paketlerini y\u00f6netmenizi ve Vue CLI gibi ara\u00e7lar\u0131 \u00e7al\u0131\u015ft\u0131rman\u0131z\u0131 sa\u011flar.<\/p>\n
1. Ortam Kurulumu (Node.js ve npm\/Yarn)<\/h3>\n
E\u011fer bilgisayar\u0131n\u0131zda Node.js kurulu de\u011filse, Node.js resmi web sitesinden<\/a> indirebilirsiniz. Node.js kurulumu ile birlikte npm de otomatik olarak kurulacakt\u0131r. Kurulumu tamamlad\u0131ktan sonra, komut istemcisini (terminal veya PowerShell) a\u00e7arak a\u015fa\u011f\u0131daki komutlarla kurulumu kontrol edebilirsiniz:<\/p>\n
node -v\nnpm -v\n<\/code><\/pre>\n\u0130ste\u011fe ba\u011fl\u0131 olarak, npm yerine daha h\u0131zl\u0131 ve g\u00fcvenilir bir paket y\u00f6neticisi olan Yarn’\u0131 da kullanabilirsiniz. Yarn kurulumu i\u00e7in:<\/p>\n npm install -g yarn\nyarn -v\n<\/code><\/pre>\n2. Vue CLI ile Proje Olu\u015fturma<\/h3>\nVue CLI (Command Line Interface), Vue projelerini h\u0131zl\u0131 bir \u015fekilde olu\u015fturmak ve y\u00f6netmek i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Vue CLI’y\u0131 global olarak kurmak i\u00e7in a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n npm install -g @vue\/cli\nveya<\/h2>\nyarn global add @vue\/cli\n<\/code><\/pre>\nKurulum tamamland\u0131ktan sonra, yeni bir Vue projesi olu\u015fturmak i\u00e7in istedi\u011finiz bir klas\u00f6re gidin ve \u015fu komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n vue create my-vue-app\n<\/code><\/pre>\nBu komutu \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda, Vue CLI size projeniz i\u00e7in baz\u0131 yap\u0131land\u0131rma se\u00e7enekleri sunacakt\u0131r. Genellikle “Default (Vue 3)” veya “Default (Vue 2)” se\u00e7ene\u011fini se\u00e7mek ba\u015flang\u0131\u00e7 i\u00e7in yeterlidir. E\u011fer Vue 3’\u00fc tercih ediyorsan\u0131z, varsay\u0131lan se\u00e7ene\u011fi kullanabilirsiniz. Se\u00e7iminizi yapt\u0131ktan sonra CLI, gerekli paketleri indirip projenizi olu\u015fturacakt\u0131r.<\/p>\n Proje olu\u015fturulduktan sonra, proje dizinine girin ve uygulamay\u0131 ba\u015flat\u0131n:<\/p>\n cd my-vue-app\nnpm run serve\nveya<\/h2>\nyarn serve\n<\/code><\/pre>\nBu komut, geli\u015ftirme sunucusunu ba\u015flatacak ve uygulaman\u0131z\u0131 genellikle http:\/\/localhost:8080\/<\/code> adresinde g\u00f6r\u00fcnt\u00fcleyebileceksiniz.<\/p>\n 3. Proje Yap\u0131s\u0131<\/h3>\nmy-vue-app<\/code> dizinine bakt\u0131\u011f\u0131n\u0131zda a\u015fa\u011f\u0131daki gibi bir yap\u0131 g\u00f6receksiniz:<\/p>\n \nnode_modules\/<\/code>: Projenizin ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 i\u00e7eren klas\u00f6r.<\/li>\n public\/<\/code>: HTML dosyalar\u0131 (index.html<\/code>) ve statik varl\u0131klar (resimler vb.) gibi derlenmemi\u015f dosyalar\u0131 i\u00e7erir.<\/li>\n src\/<\/code>: Uygulaman\u0131z\u0131n ana kodunu i\u00e7eren klas\u00f6r.\n\nassets\/<\/code>: Resimler, CSS dosyalar\u0131 gibi statik varl\u0131klar.<\/li>\n components\/<\/code>: Yeniden kullan\u0131labilir Vue bile\u015fenleri.<\/li>\n App.vue<\/code>: Ana uygulama bile\u015feni.<\/li>\n main.js<\/code>: Uygulaman\u0131z\u0131n ba\u015flang\u0131\u00e7 noktas\u0131. Vue \u00f6rne\u011fini olu\u015fturur ve App.vue<\/code>‘yu DOM’a ba\u011flar.<\/li>\n<\/ul>\n<\/li>\n .gitignore<\/code>: Git taraf\u0131ndan izlenmeyecek dosyalar\u0131 ve klas\u00f6rleri belirtir.<\/li>\n babel.config.js<\/code>: Babel yap\u0131land\u0131rma dosyas\u0131.<\/li>\n package.json<\/code>: Projenizin metadata’s\u0131n\u0131, ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 ve betiklerini i\u00e7erir.<\/li>\n README.md<\/code>: Projenizin a\u00e7\u0131klamas\u0131.<\/li>\n<\/ul>\n4. \u0130lk Bile\u015fenimizi Anlayal\u0131m (App.vue<\/code>)<\/h3>\nVue bile\u015fenleri, .vue<\/code> uzant\u0131l\u0131 tek dosyalard\u0131r (Single File Components – SFC). Bu dosyalar, bir bile\u015fenin HTML \u015fablonunu (

veya<\/h2>\nyarn serve\n<\/code><\/pre>\n
Bu komut, geli\u015ftirme sunucusunu ba\u015flatacak ve uygulaman\u0131z\u0131 genellikle `http:\/\/localhost:8080\/<\/code> adresinde g\u00f6r\u00fcnt\u00fcleyebileceksiniz.<\/p>\n`

4. \u0130lk Bile\u015fenimizi Anlayal\u0131m (`App.vue<\/code>)<\/h3>\nVue bile\u015fenleri, .vue<\/code> uzant\u0131l\u0131 tek dosyalard\u0131r (Single File Components – SFC). Bu dosyalar, bir bile\u015fenin HTML \u015fablonunu (`