{"id":37770,"date":"2026-01-15T02:40:45","date_gmt":"2026-01-14T23:40:45","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=37770"},"modified":"2026-01-15T02:40:45","modified_gmt":"2026-01-14T23:40:45","slug":"vue-cliyi-cozumlemek-modern-vue-js-gelistirmenin-kalbi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-cliyi-cozumlemek-modern-vue-js-gelistirmenin-kalbi\/","title":{"rendered":"Vue CLI’y\u0131 \u00c7\u00f6z\u00fcmlemek: Modern Vue.js Geli\u015ftirmenin Kalbi"},"content":{"rendered":"

<\/p>\n

Vue CLI’y\u0131 \u00c7\u00f6z\u00fcmlemek: Modern Vue.js Geli\u015ftirmenin Kalbi<\/h2>\n

Vue.js, hafif yap\u0131s\u0131, a\u015famal\u0131 benimseme yetene\u011fi ve m\u00fckemmel dok\u00fcmantasyonu sayesinde modern web geli\u015ftiricileri aras\u0131nda h\u0131zla pop\u00fclerlik kazanm\u0131\u015f bir JavaScript \u00e7er\u00e7evesidir. Ancak b\u00fcy\u00fck \u00f6l\u00e7ekli ve \u00fcretim seviyesinde Vue.js uygulamalar\u0131 geli\u015ftirmek sadece Vue’nun kendisini bilmekle s\u0131n\u0131rl\u0131 de\u011fildir. Bu noktada, Vue CLI (Command Line Interface) devreye girer. Vue CLI, Vue.js projelerinin iskeletini olu\u015fturan, karma\u015f\u0131k yap\u0131land\u0131rmalar\u0131 soyutlayan ve geli\u015ftirme s\u00fcrecini h\u0131zland\u0131ran g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bu makalede, Vue CLI’n\u0131n ne oldu\u011funu, neden bu kadar \u00f6nemli oldu\u011funu ve onu nas\u0131l etkin bir \u015fekilde kullan\u0131p \u00f6zelle\u015ftirebilece\u011fimizi derinlemesine inceleyece\u011fiz.<\/p>\n

Vue CLI Nedir ve Neden \u00d6nemlidir?<\/h3>\n

Vue CLI, Vue.js uygulamalar\u0131 i\u00e7in standart ara\u00e7 zinciri sa\u011flayan tam \u00f6zellikli bir sistemdir. Bir uygulama olu\u015fturmak, geli\u015ftirmek, test etmek ve da\u011f\u0131tmak i\u00e7in gereken her \u015feyi tek bir pakette sunar. Temel olarak, Vue CLI a\u015fa\u011f\u0131daki \u00fc\u00e7 ana bile\u015fenden olu\u015fur:<\/p>\n

1. CLI Servisi (@vue\/cli-service<\/code>):<\/strong> Geli\u015ftirme sunucusu, derleme ve test gibi temel g\u00f6revleri yerine getiren ana \u00e7al\u0131\u015fma zaman\u0131 ba\u011f\u0131ml\u0131l\u0131\u011f\u0131d\u0131r. Webpack, Babel ve PostCSS gibi ara\u00e7lar\u0131n yap\u0131land\u0131rmas\u0131n\u0131 soyutlar.
\n2. CLI Paketleri (@vue\/cli-plugin-*<\/code>):<\/strong> Babel, TypeScript, PWA, Router, Vuex, Linter\/Formatter, Test gibi \u00f6zellikler ekleyen iste\u011fe ba\u011fl\u0131 ba\u011f\u0131ml\u0131l\u0131klard\u0131r. Proje olu\u015fturulurken veya daha sonra eklenebilirler.
\n3. CLI Global Y\u00fcr\u00fct\u00fclebilir Dosyas\u0131 (@vue\/cli<\/code>):<\/strong> Proje olu\u015fturma (vue create<\/code>), eklenti ekleme (vue add<\/code>) ve grafiksel kullan\u0131c\u0131 aray\u00fcz\u00fc (vue ui<\/code>) gibi komutlar\u0131 sa\u011flayan global komut sat\u0131r\u0131 arac\u0131d\u0131r.<\/p>\n

Peki, Vue CLI neden bu kadar \u00f6nemlidir?<\/p>\n

* H\u0131zl\u0131 Proje Olu\u015fturma (Scaffolding):<\/strong> Yeni bir Vue projesi ba\u015flatmak, s\u0131f\u0131rdan t\u00fcm yap\u0131land\u0131rmalar\u0131 elle yapmak yerine vue create<\/code> komutuyla saniyeler i\u00e7inde ger\u00e7ekle\u015fir. Bu, geli\u015ftiricilerin hemen kod yazmaya ba\u015flamas\u0131n\u0131 sa\u011flar.
\n* Karma\u015f\u0131k Yap\u0131land\u0131rmadan Kurtulma:<\/strong> Webpack gibi derleme ara\u00e7lar\u0131 son derece g\u00fc\u00e7l\u00fcd\u00fcr ancak yap\u0131land\u0131rmalar\u0131 karma\u015f\u0131k olabilir. Vue CLI, bu karma\u015f\u0131kl\u0131\u011f\u0131 soyutlayarak, geli\u015ftiricilerin Webpack yap\u0131land\u0131rmas\u0131yla bo\u011fu\u015fmak yerine uygulama mant\u0131\u011f\u0131na odaklanmas\u0131na olanak tan\u0131r.
\n* Standart Ara\u00e7 Zinciri:<\/strong> Vue CLI, Babel (JavaScript d\u00f6n\u00fc\u015ft\u00fcrme), Webpack (mod\u00fcl paketleme), PostCSS (CSS i\u015fleme) gibi sekt\u00f6r standartlar\u0131n\u0131 entegre eder. Bu, projelerin g\u00fcncel teknolojilerle uyumlu olmas\u0131n\u0131 sa\u011flar.
\n* Esneklik ve \u00d6zelle\u015ftirme:<\/strong> Soyutlamaya ra\u011fmen, Vue CLI, vue.config.js<\/code> dosyas\u0131 arac\u0131l\u0131\u011f\u0131yla Webpack, Babel ve di\u011fer ara\u00e7lar\u0131n yap\u0131land\u0131rmas\u0131n\u0131 derinlemesine \u00f6zelle\u015ftirme imkan\u0131 sunar.
\n* Eklenti Ekosistemi:<\/strong> Geli\u015ftiricilerin ihtiya\u00e7 duyabilece\u011fi hemen hemen her \u00f6zellik i\u00e7in bir Vue CLI eklentisi bulunur (\u00f6rn. Vue Router, Vuex, TypeScript, PWA). Bu eklentiler, projeye kolayca entegre edilebilir.
\n* Geli\u015ftirme ve \u00dcretim Ortamlar\u0131:<\/strong> Vue CLI, geli\u015ftirme i\u00e7in h\u0131zl\u0131 bir canl\u0131 yeniden y\u00fckleme sunucusu ve \u00fcretim i\u00e7in optimize edilmi\u015f, minifiye edilmi\u015f ve a\u011fa\u00e7 sallama (tree-shaking) uygulanm\u0131\u015f \u00e7\u0131kt\u0131lar sa\u011flar.<\/p>\n

Kurulum ve Temel Kullan\u0131m<\/h3>\n

Vue CLI’y\u0131 kullanmaya ba\u015flamak olduk\u00e7a basittir. \u0130lk olarak, global olarak y\u00fcklemeniz gerekir:<\/p>\n

npm install -g @vue\/cli\n
veya yarn kullan\u0131yorsan\u0131z:<\/h2>\nyarn global add @vue\/cli<\/code><\/pre>\n
Kurulumdan sonra, yeni bir Vue projesi olu\u015fturabilirsiniz:<\/p>\n
vue create my-vue-app<\/code><\/pre>\n
Bu komutu \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda, Vue CLI size bir dizi se\u00e7enek sunacakt\u0131r:<\/p>\n
*   Default (Vue 3 \/ Babel \/ ESLint):<\/strong> Vue 3 ile h\u0131zl\u0131 bir ba\u015flang\u0131\u00e7 i\u00e7in varsay\u0131lan yap\u0131land\u0131rma.
\n*   Default (Vue 2 \/ Babel \/ ESLint):<\/strong> Vue 2 ile h\u0131zl\u0131 bir ba\u015flang\u0131\u00e7 i\u00e7in varsay\u0131lan yap\u0131land\u0131rma.
\n*   Manually select features:<\/strong> Projeniz i\u00e7in \u00f6zel \u00f6zellikleri (TypeScript, PWA, Router, Vuex, CSS Pre-processors, Linter\/Formatter, Unit Testing, E2E Testing) manuel olarak se\u00e7menizi sa\u011flar.<\/p>\n
Se\u00e7imlerinizi yapt\u0131ktan sonra, Vue CLI projenizi olu\u015fturacak ve gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleyecektir. Proje olu\u015fturulduktan sonra, proje dizinine girip geli\u015ftirme sunucusunu ba\u015flatabilirsiniz:<\/p>\n
cd my-vue-app\nnpm run serve\n
veya<\/h2>\nyarn serve<\/code><\/pre>\n
Bu komut, uygulaman\u0131z\u0131 yerel bir sunucuda (genellikle http:\/\/localhost:8080<\/code>) ba\u015flat\u0131r ve kodunuzda yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fiklikleri an\u0131nda yans\u0131t\u0131r (Hot Module Replacement – HMR). Uygulaman\u0131z\u0131 \u00fcretime haz\u0131r hale getirmek i\u00e7in ise:<\/p>\n
npm run build\n
veya<\/h2>\nyarn build<\/code><\/pre>\n
Bu komut, uygulaman\u0131z\u0131n optimize edilmi\u015f ve minifiye edilmi\u015f bir s\u00fcr\u00fcm\u00fcn\u00fc dist<\/code> klas\u00f6r\u00fcne derler.<\/p>\n
Proje Yap\u0131s\u0131 ve Temel Dosyalar<\/h3>\n
Vue CLI ile olu\u015fturulan bir projenin standart dizin yap\u0131s\u0131 \u015f\u00f6yledir:<\/p>\n
*   node_modules\/<\/code>:<\/strong> Proje ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 i\u00e7eren klas\u00f6r.
\n*   public\/<\/code>:<\/strong> Statik dosyalar\u0131n (\u00f6rn. index.html<\/code>, favicon) bulundu\u011fu klas\u00f6r. Bu klas\u00f6rdeki dosyalar do\u011frudan Webpack taraf\u0131ndan i\u015flenmez, oldu\u011fu gibi kopyalan\u0131r.
\n*   src\/<\/code>:<\/strong> Uygulaman\u0131z\u0131n t\u00fcm kaynak kodunun bulundu\u011fu klas\u00f6r.
\n    *   assets\/<\/code>:<\/strong> Resimler, ikonlar, fontlar gibi statik varl\u0131klar.
\n    *   components\/<\/code>:<\/strong> Yeniden kullan\u0131labilir Vue bile\u015fenleri.
\n    *   App.vue<\/code>:<\/strong> Ana uygulama bile\u015feni.
\n    *   main.js<\/code>:<\/strong> Uygulaman\u0131n ba\u015flang\u0131\u00e7 noktas\u0131. Vue \u00f6rne\u011fini olu\u015fturur ve App.vue<\/code>‘yu ba\u011flar.
\n    *   router\/index.js<\/code> (e\u011fer Vue Router se\u00e7ildiyse):<\/strong> Vue Router yap\u0131land\u0131rmas\u0131.
\n    *   store\/index.js<\/code> (e\u011fer Vuex se\u00e7ildiyse):<\/strong> Vuex store yap\u0131land\u0131rmas\u0131.
\n*   package.json<\/code>:<\/strong> Projenin meta verilerini, betiklerini ve ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 tan\u0131mlar. npm run serve<\/code>, npm run build<\/code> gibi komutlar buradaki scripts<\/code> b\u00f6l\u00fcm\u00fcnde tan\u0131ml\u0131d\u0131r.
\n*   babel.config.js<\/code>:<\/strong> Babel yap\u0131land\u0131rma dosyas\u0131. JavaScript kodunuzun farkl\u0131 taray\u0131c\u0131 ortamlar\u0131nda uyumlu \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.
\n*   postcss.config.js<\/code>:<\/strong> PostCSS yap\u0131land\u0131rma dosyas\u0131. CSS’nizi geli\u015ftirmek i\u00e7in eklentiler kullanman\u0131z\u0131 sa\u011flar (\u00f6rn. Autoprefixer).
\n*   README.md<\/code>:<\/strong> Proje hakk\u0131nda bilgi i\u00e7eren Markdown dosyas\u0131.<\/p>\n
Bu yap\u0131, b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar\u0131n geli\u015ftirilmesi i\u00e7in sa\u011flam bir temel sunar ve mod\u00fclerli\u011fi te\u015fvik eder.<\/p>\n
vue create<\/code> Komutunun Derinlemesine \u0130ncelenmesi<\/h3>\n
vue create<\/code> komutu, Vue CLI’n\u0131n en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biridir. Manuel \u00f6zellik se\u00e7imi, projenizin ihtiya\u00e7lar\u0131na g\u00f6re tam olarak yap\u0131land\u0131r\u0131lmas\u0131n\u0131 sa\u011flar.<\/p>\n
Manuel \u00d6zellik Se\u00e7imi<\/h4>\n
Manually select features<\/code> se\u00e7ene\u011fini se\u00e7ti\u011finizde, a\u015fa\u011f\u0131daki gibi bir dizi se\u00e7enekle kar\u015f\u0131la\u015f\u0131rs\u0131n\u0131z:<\/p>\n
*   Babel<\/code>:<\/strong> JavaScript kodunuzu eski taray\u0131c\u0131larda bile \u00e7al\u0131\u015fabilen uyumlu bir s\u00fcr\u00fcme d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Neredeyse her projede gereklidir.
\n*   TypeScript<\/code>:<\/strong> Statik tip denetimi ve daha iyi kod organizasyonu i\u00e7in TypeScript deste\u011fi ekler.
\n*   Progressive Web App (PWA) Support<\/code>:<\/strong> Uygulaman\u0131z\u0131 \u00e7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015fabilen ve mobil cihazlara y\u00fcklenebilen bir PWA’ya d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in gerekli servis \u00e7al\u0131\u015fan\u0131n\u0131 ve manifest dosyas\u0131n\u0131 ekler.
\n*   Router<\/code>:<\/strong> Tek sayfa uygulamalar\u0131 i\u00e7in Vue Router’\u0131 yap\u0131land\u0131r\u0131r.
\n*   Vuex<\/code>:<\/strong> Uygulama durum y\u00f6netimi i\u00e7in Vuex’i yap\u0131land\u0131r\u0131r.
\n*   CSS Pre-processors<\/code>:<\/strong> Sass\/SCSS, Less veya Stylus gibi CSS \u00f6n i\u015flemcileri i\u00e7in destek ekler.
\n*   Linter \/ Formatter<\/code>:<\/strong> ESLint ve Prettier gibi ara\u00e7larla kod kalitesini ve stilini otomatik olarak denetler ve bi\u00e7imlendirir.
\n*   Unit Testing<\/code>:<\/strong> Jest veya Mocha gibi birim test \u00e7er\u00e7eveleri i\u00e7in yap\u0131land\u0131rma ekler.
\n*   E2E Testing<\/code>:<\/strong> Cypress veya Nightwatch gibi u\u00e7tan uca test \u00e7er\u00e7eveleri i\u00e7in yap\u0131land\u0131rma ekler.<\/p>\n
Bu se\u00e7imler, projenizin package.json<\/code> dosyas\u0131na ilgili CLI eklentilerini ekler ve bu eklentiler de projenizin genel yap\u0131land\u0131rmas\u0131n\u0131 (Webpack, Babel vb.) otomatik olarak ayarlar.<\/p>\n
\u00d6n Ayarlar\u0131 Kaydetme<\/h4>\n
Manuel se\u00e7imlerinizi yapt\u0131ktan sonra, Vue CLI size bu yap\u0131land\u0131rmay\u0131 bir \u00f6n ayar (preset) olarak kaydetme se\u00e7ene\u011fi sunar. Bu, gelecekte benzer projeleri h\u0131zl\u0131ca olu\u015fturmak i\u00e7in \u00e7ok kullan\u0131\u015fl\u0131d\u0131r. Kaydedilen \u00f6n ayarlar, ~\/.vuerc<\/code> dosyas\u0131nda saklan\u0131r.<\/p>\n
\u00d6rne\u011fin, her zaman TypeScript, Vue Router ve ESLint\/Prettier kullanan bir proje olu\u015fturuyorsan\u0131z, bu yap\u0131land\u0131rmay\u0131 kaydedebilir ve yeni projelerinizde tek bir komutla uygulayabilirsiniz:<\/p>\n
vue create my-new-project --preset my-custom-preset<\/code><\/pre>\n
Bu, tak\u0131m i\u00e7inde tutarl\u0131l\u0131\u011f\u0131 sa\u011flamak ve yeni proje ba\u015flatma s\u00fcre\u00e7lerini standartla\u015ft\u0131rmak i\u00e7in harika bir yoldur.<\/p>\n
Yap\u0131land\u0131rma: vue.config.js<\/code><\/h3>\n
Vue CLI’n\u0131n g\u00fcc\u00fcn\u00fcn \u00f6nemli bir k\u0131sm\u0131, projenin davran\u0131\u015f\u0131n\u0131 \u00f6zelle\u015ftirmek i\u00e7in sundu\u011fu esneklikte yatar. Bu \u00f6zelle\u015ftirmelerin \u00e7o\u011fu, projenin k\u00f6k dizininde bulunan iste\u011fe ba\u011fl\u0131 vue.config.js<\/code> dosyas\u0131 arac\u0131l\u0131\u011f\u0131yla yap\u0131l\u0131r. Bu dosya, CommonJS mod\u00fcl\u00fc olarak d\u0131\u015fa aktar\u0131lan bir nesne veya fonksiyon d\u00f6nd\u00fcrmelidir.<\/p>\n
\/\/ vue.config.js\nmodule.exports = {\n  \/\/ Yap\u0131land\u0131rma se\u00e7enekleri buraya gelecek\n};<\/code><\/pre>\n
\u0130\u015fte vue.config.js<\/code> i\u00e7inde s\u0131k\u00e7a kullan\u0131lan baz\u0131 yap\u0131land\u0131rma se\u00e7enekleri:<\/p>\n
*   publicPath<\/code>:<\/strong> Uygulaman\u0131n da\u011f\u0131t\u0131m\u0131nda kullan\u0131lacak temel URL’yi belirtir. Varsay\u0131lan olarak \/<\/code>‘d\u0131r. E\u011fer uygulaman\u0131z bir alt dizin alt\u0131nda da\u011f\u0131t\u0131lacaksa (\u00f6rn. https:\/\/www.example.com\/my-app\/<\/code>), bu de\u011feri buna g\u00f6re ayarlaman\u0131z gerekir: publicPath: '\/my-app\/'<\/code>.
\n*   outputDir<\/code>:<\/strong> \u00dcretim derlemesi i\u00e7in \u00e7\u0131kt\u0131 dizininin ad\u0131n\u0131 belirtir. Varsay\u0131lan olarak dist<\/code>‘dir.
\n*   assetsDir<\/code>:<\/strong> outputDir<\/code> i\u00e7inde statik varl\u0131klar\u0131n (CSS, JS, resimler) yerle\u015ftirilece\u011fi dizin. Varsay\u0131lan olarak bo\u015f bir dizedir, yani varl\u0131klar do\u011frudan outputDir<\/code> alt\u0131na yerle\u015ftirilir.
\n*   indexPath<\/code>:<\/strong> Ana index.html<\/code> dosyas\u0131n\u0131n ad\u0131n\u0131 belirtir. Varsay\u0131lan olarak index.html<\/code>‘dir.
\n*   filenameHashing<\/code>:<\/strong> Derlenen varl\u0131klar\u0131n (CSS, JS) dosya adlar\u0131na hash eklenip eklenmeyece\u011fini belirler. \u00d6nbellekleme sorunlar\u0131n\u0131 \u00f6nlemek i\u00e7in \u00fcretimde true<\/code> olmas\u0131 \u00f6nerilir. Varsay\u0131lan olarak true<\/code>‘dur.
\n*   lintOnSave<\/code>:<\/strong> Kaydetme s\u0131ras\u0131nda ESLint’in \u00e7al\u0131\u015ft\u0131r\u0131l\u0131p \u00e7al\u0131\u015ft\u0131r\u0131lmayaca\u011f\u0131n\u0131 belirler. true<\/code>, false<\/code> veya 'warning'<\/code> olabilir. 'warning'<\/code> oldu\u011funda sadece uyar\u0131 verir, hatada derlemeyi durdurmaz.
\n*   runtimeCompiler<\/code>:<\/strong> Vue \u015fablonlar\u0131n\u0131 \u00e7al\u0131\u015fma zaman\u0131nda derleyip derlemeyece\u011fini belirler. E\u011fer \u015fablonlar\u0131 do\u011frudan JavaScript dizeleri olarak kullan\u0131yorsan\u0131z true<\/code> yapman\u0131z gerekebilir, ancak bu paket boyutunu art\u0131r\u0131r. Genellikle false<\/code> olarak b\u0131rak\u0131l\u0131r.
\n*   productionSourceMap<\/code>:<\/strong> \u00dcretim derlemesi i\u00e7in kaynak haritalar\u0131 olu\u015fturulup olu\u015fturulmayaca\u011f\u0131n\u0131 belirler. Hata ay\u0131klama i\u00e7in kullan\u0131\u015fl\u0131d\u0131r ancak dosya boyutunu art\u0131r\u0131r ve kaynak kodunuzu ortaya \u00e7\u0131karabilir. Varsay\u0131lan olarak true<\/code>‘dur.
\n*   css<\/code>:<\/strong> CSS ile ilgili yap\u0131land\u0131rmalar\u0131 i\u00e7erir.
\n    *   sourceMap<\/code>:<\/strong> CSS i\u00e7in kaynak haritalar\u0131 olu\u015fturulup olu\u015fturulmayaca\u011f\u0131n\u0131 belirler.
\n    *   loaderOptions<\/code>:<\/strong> CSS \u00f6n i\u015flemcilerine (Sass, Less, Stylus) \u00f6zel se\u00e7enekler ge\u00e7irmek i\u00e7in kullan\u0131l\u0131r.
\n    *   requireModuleExtension<\/code>:<\/strong> CSS mod\u00fclleri i\u00e7in dosya uzant\u0131s\u0131n\u0131n zorunlu olup olmad\u0131\u011f\u0131n\u0131 belirler.
\n*   devServer<\/code>:<\/strong> Geli\u015ftirme sunucusunun davran\u0131\u015f\u0131n\u0131 yap\u0131land\u0131r\u0131r.
\n    *   port<\/code>:<\/strong> Sunucunun \u00e7al\u0131\u015faca\u011f\u0131 port.
\n    *   host<\/code>:<\/strong> Sunucunun dinleyece\u011fi host.
\n    *   open<\/code>:<\/strong> Uygulaman\u0131n otomatik olarak taray\u0131c\u0131da a\u00e7\u0131l\u0131p a\u00e7\u0131lmayaca\u011f\u0131n\u0131 belirler.
\n    *   proxy<\/code>:<\/strong> API isteklerini ba\u015fka bir sunucuya y\u00f6nlendirmek i\u00e7in kullan\u0131l\u0131r. CORS sorunlar\u0131n\u0131 \u00e7\u00f6zmek i\u00e7in idealdir.<\/p>\n
\/\/ vue.config.js i\u00e7inde devServer proxy \u00f6rne\u011fi\n    module.exports = {\n      devServer: {\n        proxy: {\n          '\/api': {\n            target: 'http:\/\/localhost:3000', \/\/ API sunucunuzun adresi\n            ws: true,\n            changeOrigin: true\n          }\n        }\n      }\n    };<\/code><\/pre>\n
*   pluginOptions<\/code>:<\/strong> \u00dc\u00e7\u00fcnc\u00fc taraf CLI eklentilerine \u00f6zel se\u00e7enekler ge\u00e7irmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
Webpack Yap\u0131land\u0131rmas\u0131n\u0131 \u00d6zelle\u015ftirme: chainWebpack<\/code> ve configureWebpack<\/code><\/h4>\n
vue.config.js<\/code>‘nin en g\u00fc\u00e7l\u00fc b\u00f6l\u00fcmlerinden ikisi, Webpack yap\u0131land\u0131rmas\u0131n\u0131 do\u011frudan manip\u00fcle etmenizi sa\u011flayan chainWebpack<\/code> ve configureWebpack<\/code> se\u00e7enekleridir.<\/p>\n
*   configureWebpack<\/code>:<\/strong> Bu se\u00e7enek, bir nesne veya fonksiyon kabul eder. E\u011fer bir nesne ise, Webpack yap\u0131land\u0131rmas\u0131na do\u011frudan webpack-merge<\/code> kullan\u0131larak birle\u015ftirilir. E\u011fer bir fonksiyon ise, mevcut Webpack yap\u0131land\u0131rmas\u0131 arg\u00fcman olarak verilir ve bu fonksiyon i\u00e7inde yap\u0131land\u0131rmay\u0131 de\u011fi\u015ftirebilirsiniz. Bu y\u00f6ntem, basit eklemeler veya mevcut kurallar\u0131 tamamen de\u011fi\u015ftirmek i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
\/\/ vue.config.js i\u00e7inde configureWebpack \u00f6rne\u011fi\n    module.exports = {\n      configureWebpack: {\n        plugins: [\n          \/\/ Yeni bir Webpack eklentisi ekle\n          \/\/ new MyCustomWebpackPlugin()\n        ],\n        resolve: {\n          alias: {\n            '@utils': '@\/utils' \/\/ K\u0131sayol ekle\n          }\n        }\n      }\n    };<\/code><\/pre>\n
*   chainWebpack<\/code>:<\/strong> Bu se\u00e7enek, webpack-chain<\/code> adl\u0131 bir k\u00fct\u00fcphane taraf\u0131ndan sa\u011flanan zincirleme API’sini kullan\u0131r. Bu API, Webpack yap\u0131land\u0131rmas\u0131n\u0131 daha ince taneli bir \u015fekilde manip\u00fcle etmenizi sa\u011flar. Mevcut y\u00fckleyicileri, eklentileri veya kurallar\u0131 de\u011fi\u015ftirmek, eklemek veya kald\u0131rmak i\u00e7in \u00e7ok daha g\u00fc\u00e7l\u00fc ve g\u00fcvenli bir yoldur. chainWebpack<\/code> fonksiyonuna bir webpack-chain<\/code> Config<\/code> nesnesi verilir ve bu nesne \u00fczerinde zincirleme metotlar \u00e7a\u011f\u0131rarak yap\u0131land\u0131rmay\u0131 de\u011fi\u015ftirebilirsiniz.<\/p>\n
\/\/ vue.config.js i\u00e7inde chainWebpack \u00f6rne\u011fi\n    module.exports = {\n      chainWebpack: config => {\n        \/\/ SVG dosyalar\u0131n\u0131 i\u015flemek i\u00e7in mevcut kural\u0131 kald\u0131r\n        config.module.rule('svg').uses.clear();\n\n        \/\/ Yeni bir SVG y\u00fckleyici kural\u0131 ekle (\u00f6rn. vue-svg-loader)\n        config.module\n          .rule('svg')\n          .use('vue-svg-loader')\n          .loader('vue-svg-loader');\n\n        \/\/ Geli\u015ftirme ortam\u0131nda baz\u0131 eklentileri devre d\u0131\u015f\u0131 b\u0131rak\n        if (process.env.NODE_ENV === 'development') {\n          config.plugins.delete('preload');\n          config.plugins.delete('prefetch');\n        }\n      }\n    };<\/code><\/pre>\n
chainWebpack<\/code>, \u00f6zellikle karma\u015f\u0131k Webpack yap\u0131land\u0131rmalar\u0131n\u0131 de\u011fi\u015ftirmeniz gerekti\u011finde tercih edilmelidir \u00e7\u00fcnk\u00fc daha az hata yapma olas\u0131l\u0131\u011f\u0131 sunar ve mevcut yap\u0131land\u0131rmay\u0131 yanl\u0131\u015fl\u0131kla bozman\u0131z\u0131 engeller.<\/p>\n
Webpack \u0130\u00e7 Yap\u0131s\u0131 (Basitle\u015ftirilmi\u015f)<\/h3>\n
Vue CLI, Webpack’in karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde soyutlasa da, temel kavramlar\u0131 anlamak, vue.config.js<\/code>‘yi etkili bir \u015fekilde kullanmak i\u00e7in faydal\u0131d\u0131r.<\/p>\n
*   Giri\u015f Noktas\u0131 (Entry):<\/strong> Webpack’in uygulaman\u0131z\u0131 derlemeye ba\u015flad\u0131\u011f\u0131 dosya (genellikle src\/main.js<\/code>).
\n*   \u00c7\u0131k\u0131\u015f (Output):<\/strong> Webpack’in derlenmi\u015f dosyalar\u0131 nereye ve hangi adla kaydedece\u011fini belirler (outputDir<\/code>, filenameHashing<\/code>).
\n*   Y\u00fckleyiciler (Loaders):<\/strong> Webpack, sadece JavaScript dosyalar\u0131n\u0131 anlayabilir. Y\u00fckleyiciler, CSS, resimler, Vue tek dosya bile\u015fenleri gibi JavaScript d\u0131\u015f\u0131ndaki dosya t\u00fcrlerini Webpack’in anlayabilece\u011fi mod\u00fcllere d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. \u00d6rne\u011fin, vue-loader<\/code> Vue bile\u015fenlerini, css-loader<\/code> ve style-loader<\/code> CSS dosyalar\u0131n\u0131 i\u015fler.
\n*   Eklentiler (Plugins):<\/strong> Y\u00fckleyicilerin yapamad\u0131\u011f\u0131 daha geni\u015f g\u00f6revleri yerine getirirler. \u00d6rne\u011fin, HTML dosyalar\u0131n\u0131 olu\u015fturmak (html-webpack-plugin<\/code>), CSS’yi ayr\u0131 bir dosyaya \u00e7\u0131karmak (mini-css-extract-plugin<\/code>), kod s\u0131k\u0131\u015ft\u0131rma (terser-webpack-plugin<\/code>) gibi.
\n*   Geli\u015ftirme Sunucusu (DevServer):<\/strong> Geli\u015ftirme s\u0131ras\u0131nda uygulaman\u0131z\u0131 sunan ve canl\u0131 yeniden y\u00fckleme (HMR) sa\u011flayan bir Express sunucusudur.<\/p>\n
Vue CLI, t\u00fcm bu Webpack yap\u0131land\u0131rmas\u0131n\u0131 sizin i\u00e7in \u00f6nceden tan\u0131mlar ve vue.config.js<\/code> arac\u0131l\u0131\u011f\u0131yla bu yap\u0131land\u0131rmay\u0131 ad\u0131m ad\u0131m de\u011fi\u015ftirmenize olanak tan\u0131r.<\/p>\n
Eklentiler ve \u00d6n Ayarlar<\/h3>\n
Vue CLI’n\u0131n mod\u00fcler yap\u0131s\u0131, eklentiler ve \u00f6n ayarlar sayesinde b\u00fcy\u00fck bir esneklik kazan\u0131r.<\/p>\n
Vue CLI Eklentileri<\/h4>\n
Vue CLI eklentileri, @vue\/cli-plugin-<\/code> veya vue-cli-plugin-<\/em><\/code> adland\u0131rma kural\u0131na uyan npm paketleridir. Bu eklentiler, projenize yeni \u00f6zellikler (TypeScript, PWA, Router vb.) eklemek veya mevcut \u00f6zellikleri de\u011fi\u015ftirmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
Bir projeye yeni bir eklenti eklemek i\u00e7in vue add<\/code> komutunu kullan\u0131r\u0131z:<\/p>\n
vue add @vue\/eslint\nvue add @vue\/typescript\nvue add vue-cli-plugin-apollo # \u00dc\u00e7\u00fcnc\u00fc taraf bir eklenti<\/code><\/pre>\n
Bu komut, eklentiyi y\u00fckler, package.json<\/code>‘a ekler ve projenin mevcut yap\u0131land\u0131rmas\u0131n\u0131 (\u00f6rn. main.js<\/code>, router\/index.js<\/code>, vue.config.js<\/code>) otomatik olarak g\u00fcnceller.<\/p>\n
\u00d6n Ayarlar (Presets)<\/h4>\n
Daha \u00f6nce bahsedildi\u011fi gibi, \u00f6n ayarlar, belirli bir \u00f6zellik setini ve yap\u0131land\u0131rma tercihlerini i\u00e7eren kaydedilmi\u015f ayarlard\u0131r. Bunlar, ~\/.vuerc<\/code> dosyas\u0131nda JSON format\u0131nda saklan\u0131r. Kendi \u00f6zel \u00f6n ayarlar\u0131n\u0131z\u0131 olu\u015fturabilir ve bunlar\u0131 tak\u0131m arkada\u015flar\u0131n\u0131zla payla\u015farak proje ba\u015flang\u0131\u00e7lar\u0131n\u0131 standartla\u015ft\u0131rabilirsiniz.<\/p>\n
Servis ve Derleme Komutlar\u0131<\/h3>\n
Vue CLI, vue-cli-service<\/code> ad\u0131nda bir komut sat\u0131r\u0131 aray\u00fcz\u00fc (CLI) servisi sa\u011flar. package.json<\/code>‘daki betikler (serve<\/code>, build<\/code>, lint<\/code>) bu servisi \u00e7a\u011f\u0131r\u0131r.<\/p>\n
*   vue-cli-service serve<\/code>:<\/strong> Uygulaman\u0131z\u0131 geli\u015ftirme modunda \u00e7al\u0131\u015ft\u0131r\u0131r. Canl\u0131 yeniden y\u00fckleme (HMR) ve hata ay\u0131klama kolayl\u0131klar\u0131 sunar.
\n*   vue-cli-service build<\/code>:<\/strong> Uygulaman\u0131z\u0131 \u00fcretim i\u00e7in derler. Kod b\u00f6lme (code splitting), minifikasyon, s\u0131k\u0131\u015ft\u0131rma ve a\u011fa\u00e7 sallama (tree-shaking) gibi optimizasyonlar otomatik olarak uygulan\u0131r.
\n*   vue-cli-service inspect [options]<\/code>:<\/strong> Bu komut, Vue CLI taraf\u0131ndan olu\u015fturulan nihai Webpack yap\u0131land\u0131rmas\u0131n\u0131 incelemek i\u00e7in hayati \u00f6neme sahiptir. \u00d6zellikle chainWebpack<\/code> veya configureWebpack<\/code> ile u\u011fra\u015f\u0131rken veya bir hata ay\u0131klarken \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
vue inspect > webpack-config.js # T\u00fcm yap\u0131land\u0131rmay\u0131 bir dosyaya yaz\n    vue inspect --rules # Sadece Webpack kurallar\u0131n\u0131 g\u00f6ster\n    vue inspect --plugins # Sadece Webpack eklentilerini g\u00f6ster<\/code><\/pre>\n
    Bu komut, Vue CLI’n\u0131n soyutlad\u0131\u011f\u0131 Webpack yap\u0131land\u0131rmas\u0131n\u0131n tam olarak neye benzedi\u011fini g\u00f6rmenizi sa\u011flar, bu da \u00f6zelle\u015ftirmelerinizin do\u011fru uygulan\u0131p uygulanmad\u0131\u011f\u0131n\u0131 anlaman\u0131za yard\u0131mc\u0131 olur.<\/p>\n
*   vue-cli-service help [command]<\/code>:<\/strong> Belirli bir vue-cli-service<\/code> komutu hakk\u0131nda yard\u0131m bilgilerini g\u00f6sterir.<\/p>\n
Vue UI: Grafiksel Kullan\u0131c\u0131 Aray\u00fcz\u00fc<\/h3>\n
Vue CLI, komut sat\u0131r\u0131n\u0131n yan\u0131 s\u0131ra, projeleri y\u00f6netmek ve yap\u0131land\u0131rmak i\u00e7in grafiksel bir kullan\u0131c\u0131 aray\u00fcz\u00fc (GUI) de sunar. vue ui<\/code> komutunu \u00e7al\u0131\u015ft\u0131rarak bu aray\u00fcze eri\u015febilirsiniz:<\/p>\n
vue ui<\/code><\/pre>\n
Bu komut, taray\u0131c\u0131n\u0131zda bir pencere a\u00e7ar ve size \u015funlar\u0131 yapma olana\u011f\u0131 sunar:<\/p>\n
*   Yeni projeler olu\u015fturma veya mevcut projeleri i\u00e7e aktarma.
\n*   Proje yap\u0131land\u0131rmas\u0131n\u0131 g\u00f6rsel olarak y\u00f6netme (vue.config.js<\/code> se\u00e7enekleri dahil).
\n*   CLI eklentilerini arama, y\u00fckleme ve y\u00f6netme.
\n*   Proje g\u00f6revlerini (serve, build, lint, test) \u00e7al\u0131\u015ft\u0131rma ve \u00e7\u0131kt\u0131y\u0131 izleme.
\n*   Webpack yap\u0131land\u0131rmas\u0131n\u0131 g\u00f6rsel olarak inceleme.<\/p>\n
Vue UI, \u00f6zellikle CLI’ya a\u015fina olmayan veya g\u00f6rsel bir aray\u00fcz\u00fc tercih eden geli\u015ftiriciler i\u00e7in harika bir ara\u00e7t\u0131r.<\/p>\n
En \u0130yi Uygulamalar ve \u0130pu\u00e7lar\u0131<\/h3>\n
*   vue inspect<\/code>‘i Kullanmaktan \u00c7ekinmeyin:<\/strong> Webpack yap\u0131land\u0131rmas\u0131n\u0131 \u00f6zelle\u015ftirirken veya bir hata ay\u0131klarken, vue inspect<\/code> komutu size neyin yanl\u0131\u015f gitti\u011fini veya yap\u0131land\u0131rman\u0131z\u0131n beklendi\u011fi gibi uygulan\u0131p uygulanmad\u0131\u011f\u0131n\u0131 g\u00f6steren en iyi ara\u00e7t\u0131r.
\n*   \u00d6n Ayarlar\u0131 (Presets) Ak\u0131ll\u0131ca Kullan\u0131n:<\/strong> Tak\u0131m\u0131n\u0131z i\u00e7inde tutarl\u0131l\u0131k sa\u011flamak ve yeni projelerin h\u0131zl\u0131 bir \u015fekilde ba\u015flat\u0131lmas\u0131n\u0131 sa\u011flamak i\u00e7in \u00f6zel \u00f6n ayarlar olu\u015fturun ve payla\u015f\u0131n.
\n*   chainWebpack<\/code>‘i Tercih Edin:<\/strong> Webpack yap\u0131land\u0131rmas\u0131n\u0131 de\u011fi\u015ftirmek i\u00e7in configureWebpack<\/code> yerine genellikle chainWebpack<\/code>‘i tercih edin. chainWebpack<\/code>, daha g\u00fcvenli ve ince taneli de\u011fi\u015fiklikler yapman\u0131z\u0131 sa\u011flar.
\n*   Ba\u011f\u0131ml\u0131l\u0131klar\u0131 G\u00fcncel Tutun:<\/strong> Vue CLI, @vue\/cli-service<\/code> ve di\u011fer eklentileri d\u00fczenli olarak g\u00fcncelleyin. Bu, yeni \u00f6zelliklere, performans iyile\u015ftirmelerine ve g\u00fcvenlik d\u00fczeltmelerine eri\u015fmenizi sa\u011flar.
\n*   Gereksiz Eklentilerden Ka\u00e7\u0131n\u0131n:<\/strong> Projenizin ger\u00e7ekten ihtiya\u00e7 duymad\u0131\u011f\u0131 eklentileri eklemeyin. Her eklenti, derleme s\u00fcresini ve nihai paket boyutunu art\u0131rabilir.
\n*   Ortam De\u011fi\u015fkenlerini Kullan\u0131n:<\/strong> Farkl\u0131 ortamlar (geli\u015ftirme, haz\u0131rl\u0131k, \u00fcretim) i\u00e7in farkl\u0131 yap\u0131land\u0131rmalar gerekti\u011finde, .env<\/code> dosyalar\u0131n\u0131 ve ortam de\u011fi\u015fkenlerini kullan\u0131n. Vue CLI, bunlar\u0131 otomatik olarak y\u00fckler ve uygulaman\u0131za enjekte eder.<\/p>\n
Sonu\u00e7<\/h3>\n
Vue CLI, modern Vue.js geli\u015ftirme s\u00fcrecinin ayr\u0131lmaz bir par\u00e7as\u0131d\u0131r. Karma\u015f\u0131k Webpack yap\u0131land\u0131rmalar\u0131n\u0131 soyutlayarak, h\u0131zl\u0131 proje olu\u015fturma yetenekleri sunarak ve kapsaml\u0131 bir eklenti ekosistemi sa\u011flayarak geli\u015ftiricilerin \u00fcretkenli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. vue.config.js<\/code> arac\u0131l\u0131\u011f\u0131yla sunulan esnek \u00f6zelle\u015ftirme se\u00e7enekleri, projelerin benzersiz gereksinimlerine uyum sa\u011flamas\u0131na olanak tan\u0131rken, vue inspect<\/code> gibi ara\u00e7lar, bu \u00f6zelle\u015ftirmelerin alt\u0131nda yatan mekanizmalar\u0131 anlamak i\u00e7in paha bi\u00e7ilmez bir pencere sunar.<\/p>\n
Vue CLI’y\u0131 derinlemesine anlamak ve onunla etkili bir \u015fekilde \u00e7al\u0131\u015fmak, sadece daha verimli Vue.js uygulamalar\u0131 geli\u015ftirmenizi sa\u011flamakla kalmaz, ayn\u0131 zamanda modern JavaScript ara\u00e7 zinciri hakk\u0131nda genel bilginizi de zenginle\u015ftirir. Her ne kadar Vite gibi yeni nesil derleme ara\u00e7lar\u0131 pop\u00fclerlik kazansa da, Vue CLI hala milyonlarca projenin temelini olu\u015fturmakta ve Vue.js ekosisteminde merkezi bir rol oynamaktad\u0131r. Onu \u00e7\u00f6z\u00fcmlemek, Vue.js geli\u015ftirme yolculu\u011funuzda size \u00f6nemli bir avantaj sa\u011flayacakt\u0131r.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Vue CLI’y\u0131 \u00c7\u00f6z\u00fcmlemek: Modern Vue.js Geli\u015ftirmenin Kalbi\nVue.js, hafif yap\u0131s\u0131, a\u015famal\u0131 benimseme yetene\u011fi ve m\u00fckemmel dok\u00fcmantasyonu saye","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1402],"tags":[],"class_list":{"0":"post-37770","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-vue","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nVue CLI'y\u0131 \u00c7\u00f6z\u00fcmlemek: Modern Vue.js Geli\u015ftirmenin Kalbi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/vue-cliyi-cozumlemek-modern-vue-js-gelistirmenin-kalbi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vue CLI'y\u0131 \u00c7\u00f6z\u00fcmlemek: Modern Vue.js Geli\u015ftirmenin Kalbi\" \/>\n<meta property=\"og:description\" content=\"Vue CLI'y\u0131 \u00c7\u00f6z\u00fcmlemek: Modern Vue.js Geli\u015ftirmenin Kalbi Vue.js, hafif yap\u0131s\u0131, a\u015famal\u0131 benimseme yetene\u011fi ve m\u00fckemmel dok\u00fcmantasyonu saye\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/vue-cliyi-cozumlemek-modern-vue-js-gelistirmenin-kalbi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-14T23:40:45+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-cliyi-cozumlemek-modern-vue-js-gelistirmenin-kalbi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-cliyi-cozumlemek-modern-vue-js-gelistirmenin-kalbi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Vue CLI’y\u0131 \u00c7\u00f6z\u00fcmlemek: Modern Vue.js Geli\u015ftirmenin Kalbi\",\"datePublished\":\"2026-01-14T23:40:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-cliyi-cozumlemek-modern-vue-js-gelistirmenin-kalbi\/\"},\"wordCount\":2881,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Vue\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vue-cliyi-cozumlemek-modern-vue-js-gelistirmenin-kalbi\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-cliyi-cozumlemek-modern-vue-js-gelistirmenin-kalbi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/vue-cliyi-cozumlemek-modern-vue-js-gelistirmenin-kalbi\/\",\"name\":\"Vue CLI'y\u0131 \u00c7\u00f6z\u00fcmlemek: Modern Vue.js Geli\u015ftirmenin Kalbi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-14T23:40:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-cliyi-cozumlemek-modern-vue-js-gelistirmenin-kalbi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vue-cliyi-cozumlemek-modern-vue-js-gelistirmenin-kalbi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-cliyi-cozumlemek-modern-vue-js-gelistirmenin-kalbi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue CLI’y\u0131 \u00c7\u00f6z\u00fcmlemek: Modern Vue.js Geli\u015ftirmenin Kalbi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Vue CLI'y\u0131 \u00c7\u00f6z\u00fcmlemek: Modern Vue.js Geli\u015ftirmenin Kalbi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/vue-cliyi-cozumlemek-modern-vue-js-gelistirmenin-kalbi\/","og_locale":"tr_TR","og_type":"article","og_title":"Vue CLI'y\u0131 \u00c7\u00f6z\u00fcmlemek: Modern Vue.js Geli\u015ftirmenin Kalbi","og_description":"Vue CLI'y\u0131 \u00c7\u00f6z\u00fcmlemek: Modern Vue.js Geli\u015ftirmenin Kalbi Vue.js, hafif yap\u0131s\u0131, a\u015famal\u0131 benimseme yetene\u011fi ve m\u00fckemmel dok\u00fcmantasyonu saye","og_url":"https:\/\/fatihsoysal.com\/blog\/vue-cliyi-cozumlemek-modern-vue-js-gelistirmenin-kalbi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-14T23:40:45+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"17 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/vue-cliyi-cozumlemek-modern-vue-js-gelistirmenin-kalbi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-cliyi-cozumlemek-modern-vue-js-gelistirmenin-kalbi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Vue CLI’y\u0131 \u00c7\u00f6z\u00fcmlemek: Modern Vue.js Geli\u015ftirmenin Kalbi","datePublished":"2026-01-14T23:40:45+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-cliyi-cozumlemek-modern-vue-js-gelistirmenin-kalbi\/"},"wordCount":2881,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Vue"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/vue-cliyi-cozumlemek-modern-vue-js-gelistirmenin-kalbi\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/vue-cliyi-cozumlemek-modern-vue-js-gelistirmenin-kalbi\/","url":"https:\/\/fatihsoysal.com\/blog\/vue-cliyi-cozumlemek-modern-vue-js-gelistirmenin-kalbi\/","name":"Vue CLI'y\u0131 \u00c7\u00f6z\u00fcmlemek: Modern Vue.js Geli\u015ftirmenin Kalbi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-14T23:40:45+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-cliyi-cozumlemek-modern-vue-js-gelistirmenin-kalbi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/vue-cliyi-cozumlemek-modern-vue-js-gelistirmenin-kalbi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/vue-cliyi-cozumlemek-modern-vue-js-gelistirmenin-kalbi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Vue CLI’y\u0131 \u00c7\u00f6z\u00fcmlemek: Modern Vue.js Geli\u015ftirmenin Kalbi"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37770","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=37770"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37770\/revisions"}],"predecessor-version":[{"id":37771,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37770\/revisions\/37771"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=37770"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=37770"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=37770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}