{"id":35316,"date":"2025-11-28T06:40:44","date_gmt":"2025-11-28T03:40:44","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=35316"},"modified":"2025-11-28T06:40:44","modified_gmt":"2025-11-28T03:40:44","slug":"vue-js-uygulamasinda-poiyi-ozellestirme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamasinda-poiyi-ozellestirme\/","title":{"rendered":"Vue.js Uygulamas\u0131nda Poi’yi \u00d6zelle\u015ftirme"},"content":{"rendered":"

<\/p>\n

Vue.js Uygulamas\u0131nda Poi’yi \u00d6zelle\u015ftirme<\/h2>\n

Giri\u015f: Vue.js ve Poi<\/h3>\n

Modern web uygulamalar\u0131 geli\u015ftirirken, geli\u015ftirme s\u00fcrecini kolayla\u015ft\u0131ran ve performans\u0131 art\u0131ran ara\u00e7lar hayati \u00f6neme sahiptir. Vue.js, progresif bir JavaScript \u00e7er\u00e7evesi olarak, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in pop\u00fcler ve g\u00fc\u00e7l\u00fc bir se\u00e7enektir. Esnekli\u011fi, \u00f6\u011frenme kolayl\u0131\u011f\u0131 ve performans\u0131yla \u00f6ne \u00e7\u0131kar. Ancak, b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda, Vue.js kodunu taray\u0131c\u0131da \u00e7al\u0131\u015ft\u0131r\u0131labilir hale getirmek i\u00e7in bir dizi i\u015flemden ge\u00e7irmek gerekir: mod\u00fcl \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fc, kod d\u00f6n\u00fc\u015ft\u00fcrme (transpilation), paketleme (bundling), optimizasyon ve daha fazlas\u0131. \u0130\u015fte bu noktada, Webpack gibi paketleyiciler devreye girer.<\/p>\n

Webpack, JavaScript uygulamalar\u0131 i\u00e7in end\u00fcstri standard\u0131 bir mod\u00fcl paketleyicidir. Ancak, g\u00fc\u00e7l\u00fc olmas\u0131na ra\u011fmen, ba\u015flang\u0131\u00e7ta ve karma\u015f\u0131k projelerde yap\u0131land\u0131rmas\u0131 olduk\u00e7a zorlay\u0131c\u0131 olabilir. Bu zorlu\u011fu gidermek i\u00e7in Vue CLI gibi ara\u00e7lar geli\u015ftirilmi\u015ftir. Vue CLI, Webpack’i temel alan ve Vue.js projeleri i\u00e7in \u00f6nceden yap\u0131land\u0131r\u0131lm\u0131\u015f bir geli\u015ftirme ortam\u0131 sunan harika bir ara\u00e7t\u0131r. Ancak bazen, Vue CLI’nin sundu\u011fu t\u00fcm \u00f6zelliklere ihtiya\u00e7 duyulmaz veya daha hafif, daha h\u0131zl\u0131 ve daha az yap\u0131land\u0131rma gerektiren bir alternatif aran\u0131r.<\/p>\n

\u0130\u015fte Poi burada devreye girer. Poi, “s\u0131f\u0131r yap\u0131land\u0131rma” felsefesiyle geli\u015ftirilmi\u015f, modern web uygulamalar\u0131 i\u00e7in h\u0131zl\u0131 ve esnek bir paketleyicidir. Dahili olarak Webpack’i kullan\u0131r, ancak karma\u015f\u0131k yap\u0131land\u0131rma detaylar\u0131n\u0131 soyutlayarak geli\u015ftiricilerin do\u011frudan kod yazmaya odaklanmas\u0131n\u0131 sa\u011flar. Poi, Vue.js uygulamalar\u0131 i\u00e7in de m\u00fckemmel bir se\u00e7imdir \u00e7\u00fcnk\u00fc Vue dosyalar\u0131n\u0131 (Single File Components) otomatik olarak i\u015fler ve modern JavaScript \u00f6zelliklerini sorunsuz bir \u015fekilde destekler. Poi’nin temel amac\u0131, geli\u015ftirme s\u00fcrecini basitle\u015ftirmek ve h\u0131zland\u0131rmakt\u0131r, \u00f6zellikle ba\u015flang\u0131\u00e7 seviyesindeki projelerde veya Webpack’in derinlemesine yap\u0131land\u0131rmas\u0131na ihtiya\u00e7 duyulmayan durumlarda.<\/p>\n

Poi ile Temel Vue.js Projesi Kurulumu<\/h3>\n

Poi’nin en b\u00fcy\u00fck avantajlar\u0131ndan biri, yeni bir Vue.js projesini ba\u015flatman\u0131n ne kadar kolay oldu\u011fudur. Vue CLI’ye benzer bir deneyim sunar, ancak daha minimal bir yakla\u015f\u0131mla.<\/p>\n

Proje Ba\u015flatma<\/h4>\n

Yeni bir Poi tabanl\u0131 Vue.js projesi olu\u015fturmak i\u00e7in a\u015fa\u011f\u0131daki komutlardan birini kullanabilirsiniz:<\/p>\n

# npm ile\nnpm init poi-app my-vue-app\n\n
yarn ile<\/h2>\nyarn create poi-app my-vue-app<\/code><\/pre>\n
Bu komut, my-vue-app<\/code> ad\u0131nda yeni bir dizin olu\u015fturacak ve Poi’nin varsay\u0131lan Vue.js \u015fablonunu kullanarak gerekli dosyalar\u0131 ve ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleyecektir. Proje yap\u0131s\u0131 tipik bir Vue.js uygulamas\u0131na benzer olacakt\u0131r:<\/p>\n
my-vue-app\/\n\u251c\u2500\u2500 public\/\n\u2502   \u2514\u2500\u2500 index.html\n\u251c\u2500\u2500 src\/\n\u2502   \u251c\u2500\u2500 App.vue\n\u2502   \u2514\u2500\u2500 main.js\n\u251c\u2500\u2500 .gitignore\n\u251c\u2500\u2500 package.json\n\u2514\u2500\u2500 README.md<\/code><\/pre>\n
Temel \u00c7al\u0131\u015ft\u0131rma Komutlar\u0131<\/h4>\n
package.json<\/code> dosyan\u0131z\u0131 inceledi\u011finizde, Poi taraf\u0131ndan otomatik olarak eklenen baz\u0131 betikleri g\u00f6receksiniz:<\/p>\n
{\n  \"name\": \"my-vue-app\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"poi\",\n    \"build\": \"poi build\"\n  },\n  \"dependencies\": {\n    \"vue\": \"^3.2.47\"\n  },\n  \"devDependencies\": {\n    \"@poi-plugin\/vue\": \"^12.0.0\",\n    \"poi\": \"^12.10.0\"\n  }\n}<\/code><\/pre>\n
*   npm run dev<\/code> veya yarn dev<\/code>: Uygulamay\u0131 geli\u015ftirme modunda ba\u015flat\u0131r. Bir geli\u015ftirme sunucusu aya\u011fa kald\u0131r\u0131r ve Hot Module Replacement (HMR) \u00f6zelli\u011fi sayesinde kodunuzda yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fiklikleri an\u0131nda taray\u0131c\u0131ya yans\u0131t\u0131r.
\n*   npm run build<\/code> veya yarn build<\/code>: Uygulamay\u0131 \u00fcretim i\u00e7in derler. Optimize edilmi\u015f, s\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f ve da\u011f\u0131t\u0131ma haz\u0131r dosyalar\u0131 dist<\/code> dizinine \u00e7\u0131kar\u0131r.<\/p>\n
Bu basit kurulum ile, Vue.js bile\u015fenlerinizi src<\/code> dizini alt\u0131nda olu\u015fturmaya ba\u015flayabilir ve Poi’nin t\u00fcm paketleme, d\u00f6n\u00fc\u015ft\u00fcrme ve HMR \u00f6zelliklerinden faydalanabilirsiniz.<\/p>\n
Neden Poi’yi \u00d6zelle\u015ftirmeliyiz?<\/h3>\n
Poi’nin “s\u0131f\u0131r yap\u0131land\u0131rma” yakla\u015f\u0131m\u0131, bir\u00e7ok proje i\u00e7in harika bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r. Varsay\u0131lan olarak modern JavaScript, Vue tek dosya bile\u015fenleri, PostCSS ve di\u011fer yayg\u0131n web teknolojilerini destekler. Ancak ger\u00e7ek d\u00fcnya uygulamalar\u0131, genellikle bu varsay\u0131lanlar\u0131n \u00f6tesine ge\u00e7en \u00f6zel ihtiya\u00e7lara sahiptir. Poi’yi \u00f6zelle\u015ftirmek, uygulaman\u0131z\u0131n belirli gereksinimlerini kar\u015f\u0131lamak, performans\u0131 art\u0131rmak veya belirli geli\u015ftirme i\u015f ak\u0131\u015flar\u0131n\u0131 entegre etmek i\u00e7in kritik hale gelir.<\/p>\n
Poi’yi \u00f6zelle\u015ftirme ihtiyac\u0131 duyabilece\u011finiz baz\u0131 yayg\u0131n senaryolar \u015funlard\u0131r:<\/p>\n
*   Webpack Yap\u0131land\u0131rmas\u0131:<\/strong> Belirli bir Webpack y\u00fckleyicisine (loader) veya eklentisine (plugin) ihtiyac\u0131n\u0131z olabilir. \u00d6rne\u011fin, SVG’leri belirli bir \u015fekilde i\u015flemek, Web Workers kullanmak veya \u00f6zel bir veri format\u0131n\u0131 (YAML, TOML) uygulaman\u0131za dahil etmek isteyebilirsiniz.
\n*   Babel Yap\u0131land\u0131rmas\u0131:<\/strong> Varsay\u0131lan Babel yap\u0131land\u0131rmas\u0131 yeterli olmayabilir. \u00d6rne\u011fin, TypeScript deste\u011fi eklemek, deneysel JavaScript \u00f6zelliklerini kullanmak veya belirli bir ortam i\u00e7in farkl\u0131 d\u00f6n\u00fc\u015ft\u00fcrme ayarlar\u0131 yapmak isteyebilirsiniz.
\n*   PostCSS Ayarlar\u0131:<\/strong> CSS i\u015fleme s\u00fcrecine \u00f6zel PostCSS eklentileri (\u00f6rne\u011fin, Tailwind CSS, Sass\/Less deste\u011fi, CSS mod\u00fclleri) eklemek isteyebilirsiniz.
\n*   Geli\u015ftirme Sunucusu (Dev Server) Ayarlar\u0131:<\/strong> API isteklerini proxy’lemek, belirli bir port veya ana bilgisayar kullanmak, HTTPS’yi etkinle\u015ftirmek veya CORS ayarlar\u0131n\u0131 yapmak gerekebilir.
\n*   Ortam De\u011fi\u015fkenleri:<\/strong> Uygulaman\u0131za API anahtarlar\u0131, farkl\u0131 ortamlar i\u00e7in URL’ler gibi \u00f6zel ortam de\u011fi\u015fkenleri enjekte etmeniz gerekebilir.
\n*   \u00c7\u0131kt\u0131 Ayarlar\u0131:<\/strong> \u00dcretim derlemesinin \u00e7\u0131kt\u0131 dizinini, dosya adland\u0131rma \u015fablonlar\u0131n\u0131 veya genel URL yolunu de\u011fi\u015ftirmek isteyebilirsiniz.
\n*   \u00c7ok Sayfal\u0131 Uygulamalar:<\/strong> Tek sayfal\u0131k bir uygulama yerine birden fazla giri\u015f noktas\u0131na sahip \u00e7ok sayfal\u0131 bir uygulama geli\u015ftirmek.
\n*   Poi Eklentileri:<\/strong> Poi’nin resmi veya topluluk taraf\u0131ndan geli\u015ftirilen eklentilerini kullanarak belirli \u00f6zellik setlerini (\u00f6rne\u011fin, PWA deste\u011fi, TypeScript) kolayca entegre etmek.<\/p>\n
Poi, bu t\u00fcr \u00f6zelle\u015ftirmeleri poi.config.js<\/code> dosyas\u0131 arac\u0131l\u0131\u011f\u0131yla son derece esnek ve anla\u015f\u0131l\u0131r bir \u015fekilde yapman\u0131za olanak tan\u0131r. Bu dosya, Poi’nin dahili Webpack yap\u0131land\u0131rmas\u0131na m\u00fcdahale etmenizi ve projenizin gereksinimlerine g\u00f6re ince ayarlar yapman\u0131z\u0131 sa\u011flar.<\/p>\n
Poi’yi \u00d6zelle\u015ftirme: poi.config.js<\/code><\/h3>\n
Poi’nin yap\u0131land\u0131rma merkez \u00fcss\u00fc, projenizin k\u00f6k dizininde bulunan poi.config.js<\/code> dosyas\u0131d\u0131r. Bu dosya, CommonJS mod\u00fcl\u00fc olarak d\u0131\u015fa aktar\u0131lan bir JavaScript nesnesidir ve Poi’ye uygulaman\u0131z\u0131n nas\u0131l derlenece\u011fi ve geli\u015ftirilece\u011fi hakk\u0131nda talimatlar verir. E\u011fer bu dosya mevcut de\u011filse, Poi varsay\u0131lan ayarlar\u0131 kullan\u0131r. \u00d6zelle\u015ftirmeye ba\u015flamak i\u00e7in bu dosyay\u0131 olu\u015fturman\u0131z yeterlidir:<\/p>\n
\/\/ poi.config.js\nmodule.exports = {\n  \/\/ Buraya \u00f6zel yap\u0131land\u0131rma se\u00e7eneklerinizi ekleyin\n};<\/code><\/pre>\n
poi.config.js<\/code> dosyas\u0131, Poi’nin dahili Webpack yap\u0131land\u0131rmas\u0131n\u0131 manip\u00fcle etmenizi sa\u011flayan \u00e7e\u015fitli \u00fcst d\u00fczey se\u00e7enekler sunar. Bu se\u00e7enekler, Webpack’in kendisini do\u011frudan yap\u0131land\u0131rmak yerine, daha y\u00fcksek bir soyutlama seviyesinde \u00e7al\u0131\u015f\u0131r.<\/p>\n
Anahtar \u00d6zelle\u015ftirme Alanlar\u0131<\/h4>\n
Poi’nin poi.config.js<\/code> dosyas\u0131 \u00fczerinden sunulan ba\u015fl\u0131ca \u00f6zelle\u015ftirme alanlar\u0131n\u0131 ve bunlar\u0131 nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131 detayl\u0131ca inceleyelim.<\/p>\n
1. Webpack Yap\u0131land\u0131rmas\u0131 (configureWebpack<\/code>)<\/h5>\n
Bu, Poi’nin en g\u00fc\u00e7l\u00fc \u00f6zelle\u015ftirme noktalar\u0131ndan biridir. configureWebpack<\/code> se\u00e7ene\u011fi, Webpack’in dahili yap\u0131land\u0131rmas\u0131n\u0131 do\u011frudan de\u011fi\u015ftirmenize olanak tan\u0131r. Bu se\u00e7enek, bir webpack-chain<\/code> yap\u0131land\u0131rma nesnesi alan bir fonksiyon veya do\u011frudan bir Webpack yap\u0131land\u0131rma nesnesi d\u00f6nd\u00fcren bir fonksiyon olarak tan\u0131mlanabilir. webpack-chain<\/code> kullanmak, mevcut kurallar\u0131 ve eklentileri daha g\u00fcvenli ve okunakl\u0131 bir \u015fekilde de\u011fi\u015ftirmenizi sa\u011flar.<\/p>\n
\u00d6rnek: Webpack Alias Ekleme<\/strong><\/p>\n
Uygulaman\u0131zdaki mod\u00fcl yollar\u0131n\u0131 k\u0131saltmak i\u00e7in alias’lar eklemek yayg\u0131n bir ihtiya\u00e7t\u0131r. \u00d6rne\u011fin, @<\/code> alias’\u0131n\u0131 src<\/code> dizinine i\u015faret etmek isteyebilirsiniz:<\/p>\n
\/\/ poi.config.js\nmodule.exports = {\n  configureWebpack(config) {\n    \/\/ config bir webpack-chain instance'\u0131d\u0131r\n    config.resolve.alias.set('@', require('path').resolve(__dirname, 'src'));\n  },\n};<\/code><\/pre>\n
\u015eimdi, bile\u015fenlerinizde import MyComponent from '@\/components\/MyComponent.vue';<\/code> \u015feklinde k\u0131sa yollar kullanabilirsiniz.<\/p>\n
\u00d6rnek: \u00d6zel Bir Webpack Y\u00fckleyicisi (Loader) Ekleme<\/strong><\/p>\n
Varsay\u0131lan olarak desteklenmeyen bir dosya t\u00fcr\u00fcn\u00fc i\u015flemek i\u00e7in \u00f6zel bir y\u00fckleyici eklemeniz gerekebilir. \u00d6rne\u011fin, Markdown dosyalar\u0131n\u0131 Vue bile\u015fenlerine d\u00f6n\u00fc\u015ft\u00fcren bir markdown-loader<\/code> kullanmak:<\/p>\n
\/\/ poi.config.js\nmodule.exports = {\n  configureWebpack(config) {\n    config.module\n      .rule('markdown') \/\/ Yeni bir kural tan\u0131mla\n      .test(\/\\.md$\/) \/\/ .md uzant\u0131l\u0131 dosyalar\u0131 hedefle\n      .use('vue-loader')\n      .loader('vue-loader')\n      .end()\n      .use('markdown-loader')\n      .loader('markdown-loader')\n      .end();\n  },\n};<\/code><\/pre>\n
\u00d6rnek: Webpack Eklentisi (Plugin) Ekleme veya De\u011fi\u015ftirme<\/strong><\/p>\n
Webpack eklentileri, derleme s\u00fcrecinin \u00e7e\u015fitli a\u015famalar\u0131nda \u00f6zel i\u015flemler yapman\u0131z\u0131 sa\u011flar. \u00d6rne\u011fin, bir CopyWebpackPlugin<\/code> kullanarak statik dosyalar\u0131 public<\/code> dizininden dist<\/code> dizinine kopyalamak:<\/p>\n
\/\/ poi.config.js\nconst CopyWebpackPlugin = require('copy-webpack-plugin');\n\nmodule.exports = {\n  configureWebpack(config) {\n    config.plugin('copy-webpack-plugin').use(CopyWebpackPlugin, [\n      {\n        patterns: [\n          {\n            from: 'public\/images',\n            to: 'images',\n          },\n        ],\n      },\n    ]);\n  },\n};<\/code><\/pre>\n
2. Babel Yap\u0131land\u0131rmas\u0131 (babel<\/code>)<\/h5>\n
Poi, Babel’i kullanarak modern JavaScript kodunu eski taray\u0131c\u0131lar i\u00e7in uyumlu hale getirir. babel<\/code> se\u00e7ene\u011fi ile Babel’in \u00f6n ayarlar\u0131n\u0131 (presets) ve eklentilerini (plugins) de\u011fi\u015ftirebilirsiniz.<\/p>\n
\u00d6rnek: TypeScript Deste\u011fi Ekleme (Manuel Y\u00f6ntem)<\/strong><\/p>\n
Poi’nin TypeScript eklentisi olsa da, manuel olarak Babel \u00fczerinden TypeScript deste\u011fi eklemek de m\u00fcmk\u00fcnd\u00fcr:<\/p>\n
\/\/ poi.config.js\nmodule.exports = {\n  babel: {\n    presets: [\n      \/\/ Varsay\u0131lan presetleri koru\n      \/\/ TypeScript presetini ekle\n      ['@babel\/preset-typescript', { allExtensions: true }],\n    ],\n    plugins: [\n      \/\/ S\u0131n\u0131f \u00f6zellikleri gibi deneysel \u00f6zellikleri etkinle\u015ftir\n      ['@babel\/plugin-proposal-class-properties', { loose: true }],\n    ],\n  },\n};<\/code><\/pre>\n
Bu y\u00f6ntemi kullanmadan \u00f6nce @babel\/preset-typescript<\/code> ve @babel\/plugin-proposal-class-properties<\/code> gibi gerekli Babel paketlerini y\u00fcklemeniz gerekecektir.<\/p>\n
3. PostCSS Yap\u0131land\u0131rmas\u0131 (postcss<\/code>)<\/h5>\n
CSS’inizi i\u015flemek i\u00e7in PostCSS eklentilerini kullanabilirsiniz. postcss<\/code> se\u00e7ene\u011fi, PostCSS yap\u0131land\u0131rmas\u0131n\u0131 \u00f6zelle\u015ftirmenizi sa\u011flar.<\/p>\n
\u00d6rnek: Autoprefixer ve Tailwind CSS Entegrasyonu<\/strong><\/p>\n
Tailwind CSS gibi bir CSS \u00e7er\u00e7evesini entegre etmek veya taray\u0131c\u0131 uyumlulu\u011fu i\u00e7in otomatik \u00f6nekler eklemek i\u00e7in PostCSS eklentilerini kullanabilirsiniz:<\/p>\n
\/\/ poi.config.js\nmodule.exports = {\n  postcss: {\n    plugins: [\n      require('tailwindcss'), \/\/ Tailwind CSS eklentisi\n      require('autoprefixer'), \/\/ Otomatik \u00f6nek ekleyici\n    ],\n  },\n};<\/code><\/pre>\n
Bu yap\u0131land\u0131rmay\u0131 kullanmadan \u00f6nce tailwindcss<\/code> ve autoprefixer<\/code> paketlerini y\u00fcklemeniz ve tailwind.config.js<\/code> dosyan\u0131z\u0131 olu\u015fturman\u0131z gerekecektir.<\/p>\n
4. Geli\u015ftirme Sunucusu Yap\u0131land\u0131rmas\u0131 (devServer<\/code>)<\/h5>\n
devServer<\/code> se\u00e7ene\u011fi, geli\u015ftirme sunucusunun davran\u0131\u015f\u0131n\u0131 kontrol eder. Proxy ayarlar\u0131, port numaras\u0131, ana bilgisayar ve HTTPS gibi \u00f6zellikler burada yap\u0131land\u0131r\u0131labilir.<\/p>\n
\u00d6rnek: API \u0130steklerini Proxy’leme<\/strong><\/p>\n
Geli\u015ftirme s\u0131ras\u0131nda, \u00f6n u\u00e7 uygulaman\u0131z\u0131n farkl\u0131 bir kaynaktan gelen bir arka u\u00e7 API’sine istek g\u00f6ndermesi gerekebilir. CORS sorunlar\u0131n\u0131 \u00f6nlemek i\u00e7in bir proxy kullanabilirsiniz:<\/p>\n
\/\/ poi.config.js\nmodule.exports = {\n  devServer: {\n    port: 8080, \/\/ Varsay\u0131lan portu de\u011fi\u015ftir\n    proxy: {\n      '\/api': {\n        target: 'http:\/\/localhost:3000', \/\/ Arka u\u00e7 sunucusunun adresi\n        changeOrigin: true, \/\/ Host ba\u015fl\u0131\u011f\u0131n\u0131 de\u011fi\u015ftir\n        pathRewrite: { '^\/api': '' }, \/\/ \u0130stekteki '\/api' \u00f6n ekini kald\u0131r\n      },\n    },\n  },\n};<\/code><\/pre>\n
Bu yap\u0131land\u0131rma ile, uygulaman\u0131zdaki \/api\/users<\/code> iste\u011fi http:\/\/localhost:3000\/users<\/code> adresine y\u00f6nlendirilecektir.<\/p>\n
5. Ortam De\u011fi\u015fkenleri (env<\/code>)<\/h5>\n
Uygulaman\u0131za \u00f6zel ortam de\u011fi\u015fkenleri enjekte etmek i\u00e7in env<\/code> se\u00e7ene\u011fini kullanabilirsiniz. Bu de\u011fi\u015fkenler process.env<\/code> \u00fczerinden uygulaman\u0131z\u0131n kodunda eri\u015filebilir olacakt\u0131r.<\/p>\n
\u00d6rnek: API URL’si Tan\u0131mlama<\/strong><\/p>\n
\/\/ poi.config.js\nmodule.exports = {\n  env: {\n    VUE_APP_API_URL: process.env.NODE_ENV === 'production' ? 'https:\/\/api.myapp.com' : 'http:\/\/localhost:3000\/api',\n    VUE_APP_ANALYTICS_KEY: 'your-analytics-key',\n  },\n};<\/code><\/pre>\n
Art\u0131k Vue bile\u015fenlerinizde process.env.VUE_APP_API_URL<\/code> veya process.env.VUE_APP_ANALYTICS_KEY<\/code> gibi de\u011fi\u015fkenlere eri\u015febilirsiniz.<\/p>\n
6. Poi Eklentileri (plugins<\/code>)<\/h5>\n
Poi, kendi eklenti sistemine sahiptir. Bu eklentiler, belirli \u00f6zellik setlerini (\u00f6rne\u011fin, TypeScript deste\u011fi, PWA) kolayca entegre etmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
\u00d6rnek: TypeScript Deste\u011fi Ekleme (\u00d6nerilen Y\u00f6ntem)<\/strong><\/p>\n
Poi’nin resmi TypeScript eklentisini kullanmak, Babel \u00fczerinden manuel olarak yap\u0131land\u0131rmaktan daha kolay ve kapsaml\u0131d\u0131r:<\/p>\n
npm install -D @poi\/plugin-typescript\n
veya<\/h2>\nyarn add -D @poi\/plugin-typescript<\/code><\/pre>\n
Ard\u0131ndan poi.config.js<\/code> dosyan\u0131za ekleyin:<\/p>\n
\/\/ poi.config.js\nmodule.exports = {\n  plugins: [\n    '@poi\/plugin-typescript', \/\/ TypeScript eklentisini etkinle\u015ftir\n  ],\n};<\/code><\/pre>\n
Bu eklenti, TypeScript dosyalar\u0131n\u0131 .ts<\/code> ve .tsx<\/code> uzant\u0131lar\u0131yla i\u015fleyecek, tsconfig.json<\/code> dosyan\u0131z\u0131 okuyacak ve gerekli t\u00fcr denetimlerini yapacakt\u0131r.<\/p>\n
\u00d6rnek: PWA (Progressive Web App) Entegrasyonu<\/strong><\/p>\n
Uygulaman\u0131z\u0131 bir PWA’ya d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in @poi\/plugin-pwa<\/code> eklentisini kullanabilirsiniz:<\/p>\n
npm install -D @poi\/plugin-pwa\n
veya<\/h2>\nyarn add -D @poi\/plugin-pwa<\/code><\/pre>\n
Ard\u0131ndan poi.config.js<\/code> dosyan\u0131za ekleyin:<\/p>\n
\/\/ poi.config.js\nmodule.exports = {\n  plugins: [\n    [\n      '@poi\/plugin-pwa',\n      {\n        name: 'My Vue App',\n        short_name: 'Vue App',\n        theme_color: '#4DBA87',\n        msTileColor: '#000000',\n        appleMobileWebAppCapable: 'yes',\n        appleMobileWebAppStatusBarStyle: 'black',\n        workboxOptions: {\n          \/\/ Workbox yap\u0131land\u0131rma se\u00e7enekleri\n          \/\/ \u00d6nbelle\u011fe alma stratejileri vb.\n        },\n      },\n    ],\n  ],\n};<\/code><\/pre>\n
Bu eklenti, otomatik olarak bir manifest.json<\/code> dosyas\u0131 olu\u015fturacak, bir service worker kaydedecek ve PWA i\u00e7in gerekli di\u011fer ayarlar\u0131 yapacakt\u0131r.<\/p>\n
7. \u00c7\u0131kt\u0131 Yap\u0131land\u0131rmas\u0131 (output<\/code>)<\/h5>\n
\u00dcretim derlemesinin \u00e7\u0131kt\u0131 dizinini, dosya adland\u0131rma \u015fablonlar\u0131n\u0131 veya genel URL yolunu de\u011fi\u015ftirmek i\u00e7in output<\/code> se\u00e7ene\u011fini kullanabilirsiniz.<\/p>\n
\u00d6rnek: \u00c7\u0131kt\u0131 Dizini ve Genel URL De\u011fi\u015ftirme<\/strong><\/p>\n
\/\/ poi.config.js\nmodule.exports = {\n  output: {\n    dir: 'build', \/\/ \u00c7\u0131kt\u0131 dizinini 'dist' yerine 'build' olarak ayarla\n    publicUrl: '\/my-app\/', \/\/ Uygulaman\u0131n sunulaca\u011f\u0131 temel URL\n    filename: {\n      js: 'js\/[name].[contenthash:8].js',\n      css: 'css\/[name].[contenthash:8].css',\n      \/\/ Di\u011fer varl\u0131k t\u00fcrleri i\u00e7in de adland\u0131rma \u015fablonlar\u0131 belirtebilirsiniz.\n    },\n  },\n};<\/code><\/pre>\n
Bu yap\u0131land\u0131rma, derlenen dosyalar\u0131n build<\/code> dizinine kaydedilmesini ve t\u00fcm varl\u0131k URL’lerinin \/my-app\/<\/code> ile ba\u015flamas\u0131n\u0131 sa\u011flar.<\/p>\n
8. Sayfalar Yap\u0131land\u0131rmas\u0131 (pages<\/code>)<\/h5>\n
Poi, varsay\u0131lan olarak tek sayfal\u0131k bir uygulama (SPA) i\u00e7in yap\u0131land\u0131r\u0131lm\u0131\u015ft\u0131r. Ancak, pages<\/code> se\u00e7ene\u011fini kullanarak \u00e7ok sayfal\u0131 uygulamalar (MPA) olu\u015fturabilirsiniz.<\/p>\n
\u00d6rnek: \u00c7ok Sayfal\u0131 Uygulama Olu\u015fturma<\/strong><\/p>\n
\/\/ poi.config.js\nmodule.exports = {\n  pages: {\n    index: {\n      entry: '.\/src\/main.js', \/\/ Ana sayfan\u0131n giri\u015f noktas\u0131\n      template: '.\/public\/index.html', \/\/ Ana sayfan\u0131n HTML \u015fablonu\n      filename: 'index.html', \/\/ \u00c7\u0131kt\u0131 HTML dosyas\u0131n\u0131n ad\u0131\n    },\n    admin: {\n      entry: '.\/src\/admin.js', \/\/ Y\u00f6netici sayfas\u0131n\u0131n giri\u015f noktas\u0131\n      template: '.\/public\/admin.html', \/\/ Y\u00f6netici sayfas\u0131n\u0131n HTML \u015fablonu\n      filename: 'admin.html', \/\/ \u00c7\u0131kt\u0131 HTML dosyas\u0131n\u0131n ad\u0131\n    },\n  },\n};<\/code><\/pre>\n
Bu yap\u0131land\u0131rma ile, src\/main.js<\/code> ve src\/admin.js<\/code> olmak \u00fczere iki farkl\u0131 giri\u015f noktas\u0131na sahip olursunuz ve Poi her biri i\u00e7in ayr\u0131 bir HTML dosyas\u0131 ve JavaScript paketi olu\u015fturur.<\/p>\n
Geli\u015fmi\u015f \u00d6zelle\u015ftirme Senaryolar\u0131<\/h3>\n
Daha \u00f6nce bahsedilen temel \u00f6zelle\u015ftirme alanlar\u0131n\u0131n \u00f6tesine ge\u00e7erek, baz\u0131 yayg\u0131n ve daha geli\u015fmi\u015f senaryolar\u0131 inceleyelim.<\/p>\n
TypeScript Entegrasyonu (Detayl\u0131)<\/h4>\n
Poi’nin @poi\/plugin-typescript<\/code> eklentisi, TypeScript’i Vue.js projenize entegre etmenin en kolay yoludur.<\/p>\n
1.  Eklentiyi Kurun:<\/strong><\/p>\n
npm install -D @poi\/plugin-typescript typescript<\/code><\/pre>\n
2.  tsconfig.json<\/code> Olu\u015fturun:<\/strong>
\n    Projenizin k\u00f6k dizininde bir tsconfig.json<\/code> dosyas\u0131 olu\u015fturun. Bu dosya, TypeScript derleyicisinin nas\u0131l davranaca\u011f\u0131n\u0131 belirler.<\/p>\n
\/\/ tsconfig.json\n    {\n      \"compilerOptions\": {\n        \"target\": \"esnext\",\n        \"module\": \"esnext\",\n        \"strict\": true,\n        \"jsx\": \"preserve\",\n        \"importHelpers\": true,\n        \"moduleResolution\": \"node\",\n        \"experimentalDecorators\": true,\n        \"esModuleInterop\": true,\n        \"allowSyntheticDefaultImports\": true,\n        \"sourceMap\": true,\n        \"baseUrl\": \".\",\n        \"types\": [\"webpack-env\", \"jest\"],\n        \"paths\": {\n          \"@\/\": [\"src\/<\/em>\"]\n        },\n        \"lib\": [\"esnext\", \"dom\", \"dom.iterable\", \"scripthost\"]\n      },\n      \"include\": [\"src\/\/.ts\", \"src\/<\/strong>\/<\/em>.tsx\", \"src\/\/.vue\", \"tests\/<\/strong>\/<\/em>.ts\", \"tests\/<\/em>\/*.tsx\"],\n      \"exclude\": [\"node_modules\"]\n    }<\/code><\/pre>\n
3.  Poi Yap\u0131land\u0131rmas\u0131:<\/strong>
\n    poi.config.js<\/code> dosyan\u0131zda eklentiyi etkinle\u015ftirin:<\/p>\n
\/\/ poi.config.js\n    module.exports = {\n      plugins: ['@poi\/plugin-typescript'],\n      \/\/ \u0130ste\u011fe ba\u011fl\u0131: TypeScript derlemesi s\u0131ras\u0131nda ek se\u00e7enekler ekleyebilirsiniz\n      \/\/ configureWebpack(config) {\n      \/\/   config.module\n      \/\/     .rule('ts')\n      \/\/     .use('ts-loader')\n      \/\/     .tap(options => {\n      \/\/       \/\/ ts-loader se\u00e7eneklerini \u00f6zelle\u015ftir\n      \/\/       return options;\n      \/\/     });\n      \/\/ },\n    };<\/code><\/pre>\n
Art\u0131k .ts<\/code> uzant\u0131l\u0131 dosyalar olu\u015fturabilir ve Vue bile\u015fenlerinizde lang=\"ts\"<\/code> kullanarak TypeScript’i kullanabilirsiniz.<\/p>\n
ESLint Entegrasyonu<\/h4>\n
Poi, varsay\u0131lan olarak ESLint’i derleme s\u00fcrecine dahil etmez. Ancak, kod kalitesini sa\u011flamak i\u00e7in ESLint’i projenize entegre etmek \u00f6nemlidir. Bunu genellikle geli\u015ftirme sunucusunda canl\u0131 hata denetimi veya derleme \u00f6ncesi kontrol olarak yapmak en iyisidir.<\/p>\n
1.  Gerekli Paketleri Kurun:<\/strong><\/p>\n
npm install -D eslint @vue\/eslint-config-typescript eslint-plugin-vue @typescript-eslint\/parser @typescript-eslint\/eslint-plugin<\/code><\/pre>\n
    Bu paketler, Vue.js ve TypeScript i\u00e7in ESLint deste\u011fi sa\u011flar.
\n2.  .eslintrc.js<\/code> Olu\u015fturun:<\/strong>
\n    Projenizin k\u00f6k dizininde bir .eslintrc.js<\/code> dosyas\u0131 olu\u015fturun:<\/p>\n
\/\/ .eslintrc.js\n    module.exports = {\n      root: true,\n      env: {\n        node: true,\n      },\n      extends: ['plugin:vue\/vue3-essential', 'eslint:recommended', '@vue\/typescript\/recommended'],\n      parserOptions: {\n        ecmaVersion: 2020,\n      },\n      rules: {\n        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',\n        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',\n        \/\/ \u00d6zel Vue.js veya TypeScript kurallar\u0131 ekleyebilirsiniz\n      },\n    };<\/code><\/pre>\n
3.  package.json<\/code> Betikleri:<\/strong>
\n    package.json<\/code> dosyan\u0131za ESLint’i \u00e7al\u0131\u015ft\u0131rmak i\u00e7in bir betik ekleyin:<\/p>\n
\"scripts\": {\n      \"dev\": \"poi\",\n      \"build\": \"poi build\",\n      \"lint\": \"eslint \\\"{src,tests}\/<\/em>\/*.{js,ts,vue}\\\" --fix\"\n    }<\/code><\/pre>\n
    npm run lint<\/code> komutu, t\u00fcm src<\/code> ve tests<\/code> dizinlerindeki JS, TS ve Vue dosyalar\u0131n\u0131 denetleyecek ve otomatik olarak d\u00fczeltilebilecek sorunlar\u0131 d\u00fczeltecektir.<\/p>\n
Daha Hafif Bir Webpack Yap\u0131land\u0131rmas\u0131 \u0130\u00e7in Optimizasyonlar<\/h4>\n
Poi, varsay\u0131lan olarak iyi optimizasyonlar sunsa da, baz\u0131 durumlarda daha fazla ince ayar yapmak isteyebilirsiniz.<\/p>\n
\u00d6rnek: SplitChunks Ayarlar\u0131n\u0131 \u00d6zelle\u015ftirme<\/strong><\/p>\n
Webpack’in optimization.splitChunks<\/code> \u00f6zelli\u011fi, ortak ba\u011f\u0131ml\u0131l\u0131klar\u0131 ayr\u0131 \u00f6beklere b\u00f6lerek \u00f6nbelle\u011fe almay\u0131 ve sayfa y\u00fckleme s\u00fcrelerini iyile\u015ftirmeye yard\u0131mc\u0131 olur.<\/p>\n
\/\/ poi.config.js\nmodule.exports = {\n  configureWebpack(config) {\n    config.optimization.splitChunks({\n      chunks: 'all',\n      minSize: 10000, \/\/ Minimum \u00f6bek boyutu\n      maxInitialRequests: 5, \/\/ Ba\u015flang\u0131\u00e7ta maksimum paralel istek\n      cacheGroups: {\n        vendors: {\n          test: \/[\\\\\/]node_modules[\\\\\/]\/,\n          priority: -10,\n          name: 'chunk-vendors',\n        },\n        common: {\n          minChunks: 2,\n          priority: -20,\n          reuseExistingChunk: true,\n          name: 'chunk-common',\n        },\n      },\n    });\n  },\n};<\/code><\/pre>\n
Bu ayarlar, node_modules<\/code> i\u00e7indeki k\u00fct\u00fcphaneleri ayr\u0131 bir chunk-vendors<\/code> \u00f6be\u011fine ve uygulaman\u0131zdaki s\u0131k kullan\u0131lan mod\u00fclleri chunk-common<\/code> \u00f6be\u011fine ay\u0131r\u0131r.<\/p>\n
En \u0130yi Uygulamalar ve \u0130pu\u00e7lar\u0131<\/h3>\n
Poi’yi \u00f6zelle\u015ftirirken akl\u0131n\u0131zda bulundurman\u0131z gereken baz\u0131 en iyi uygulamalar ve ipu\u00e7lar\u0131:<\/p>\n
*   Belgeleri Takip Edin:<\/strong> Poi’nin resmi belgeleri, en g\u00fcncel ve do\u011fru bilgileri i\u00e7erir. \u00d6zelle\u015ftirme yapmadan \u00f6nce ilgili b\u00f6l\u00fcmleri okumak her zaman iyi bir fikirdir.
\n*   poi.config.js<\/code>‘yi Temiz Tutun:<\/strong> Yap\u0131land\u0131rma dosyan\u0131z\u0131n okunabilirli\u011fini koruyun. A\u015f\u0131r\u0131 karma\u015f\u0131k veya gereksiz yap\u0131land\u0131rmalardan ka\u00e7\u0131n\u0131n. Karma\u015f\u0131k mant\u0131klar i\u00e7in yard\u0131mc\u0131 fonksiyonlar veya ayr\u0131 dosyalar kullanmay\u0131 d\u00fc\u015f\u00fcn\u00fcn.
\n*   Ortam De\u011fi\u015fkenlerini Kullan\u0131n:<\/strong> Hassas verileri (API anahtarlar\u0131 gibi) veya ortama \u00f6zg\u00fc ayarlar\u0131 (API URL’leri gibi) do\u011frudan poi.config.js<\/code> i\u00e7ine yazmak yerine ortam de\u011fi\u015fkenleri (\u00f6rne\u011fin, .env<\/code> dosyalar\u0131 ve dotenv<\/code> paketi ile) kullanarak y\u00f6netin.
\n*   De\u011fi\u015fiklikleri Test Edin:<\/strong> Herhangi bir yap\u0131land\u0131rma de\u011fi\u015fikli\u011fi yapt\u0131ktan sonra uygulaman\u0131z\u0131 hem geli\u015ftirme modunda (npm run dev<\/code>) hem de \u00fcretim modunda (npm run build<\/code>) test edin. Beklenmeyen hatalar\u0131 veya performans sorunlar\u0131n\u0131 \u00f6nceden tespit edin.
\n*   webpack-chain<\/code> Avantaj\u0131n\u0131 Kullan\u0131n:<\/strong> configureWebpack<\/code> i\u00e7inde do\u011frudan bir Webpack nesnesi d\u00f6nd\u00fcrmek yerine webpack-chain<\/code> API’sini kullanmak, mevcut yap\u0131land\u0131rmay\u0131 daha g\u00fcvenli ve mod\u00fcler bir \u015fekilde de\u011fi\u015ftirmenizi sa\u011flar. Bu, Poi’nin veya eklentilerinin gelecekteki g\u00fcncellemeleriyle \u00e7ak\u0131\u015fma riskini azalt\u0131r.
\n*   Ne Zaman Ba\u015fka Bir Araca Ge\u00e7melisiniz?<\/strong> Poi, bir\u00e7ok proje i\u00e7in harika bir se\u00e7imdir. Ancak, uygulaman\u0131z \u00e7ok karma\u015f\u0131k hale gelirse, \u00f6zel ve derinlemesine Webpack yap\u0131land\u0131rmas\u0131na ihtiya\u00e7 duyarsan\u0131z, veya \u00e7oklu ortamlar i\u00e7in \u00e7ok farkl\u0131 derleme stratejileri gerekiyorsa, Vue CLI veya do\u011frudan Webpack’e ge\u00e7meyi d\u00fc\u015f\u00fcnebilirsiniz. Poi, basitli\u011fi ve h\u0131z\u0131 \u00f6n planda tutar.<\/p>\n
Sonu\u00e7<\/h3>\n
Poi, Vue.js uygulamalar\u0131 geli\u015ftirmek i\u00e7in modern, h\u0131zl\u0131 ve esnek bir paketleyicidir. “S\u0131f\u0131r yap\u0131land\u0131rma” yakla\u015f\u0131m\u0131 sayesinde geli\u015ftiricilerin h\u0131zla ba\u015flamas\u0131n\u0131 sa\u011flarken, poi.config.js<\/code> dosyas\u0131 arac\u0131l\u0131\u011f\u0131yla sunulan kapsaml\u0131 \u00f6zelle\u015ftirme se\u00e7enekleri sayesinde her t\u00fcrl\u00fc \u00f6zel ihtiyaca uyum sa\u011flayabilir. Webpack yap\u0131land\u0131rmas\u0131n\u0131 manip\u00fcle etmekten Babel ve PostCSS ayarlar\u0131na, geli\u015ftirme sunucusu konfig\u00fcrasyonundan Poi’nin kendi eklenti sistemine kadar geni\u015f bir yelpazede \u00f6zelle\u015ftirme imkanlar\u0131 sunar.<\/p>\n
Bu makalede incelenen anahtar \u00f6zelle\u015ftirme alanlar\u0131 ve senaryolar, Poi’nin g\u00fcc\u00fcn\u00fc ve esnekli\u011fini g\u00f6stermektedir. \u0130ster bir ba\u015flang\u0131\u00e7 projesi geli\u015ftiriyor olun ister daha karma\u015f\u0131k bir kurumsal uygulama \u00fczerinde \u00e7al\u0131\u015f\u0131yor olun, Poi’nin \u00f6zelle\u015ftirme yetenekleri, geli\u015ftirme s\u00fcrecinizi optimize etmenize ve uygulaman\u0131z\u0131n performans\u0131n\u0131 ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini art\u0131rman\u0131za yard\u0131mc\u0131 olacakt\u0131r. Do\u011fru yap\u0131land\u0131rmalarla, Poi’yi kendi benzersiz gereksinimlerinize g\u00f6re \u015fekillendirebilir ve Vue.js projeleriniz i\u00e7in g\u00fc\u00e7l\u00fc ve verimli bir geli\u015ftirme ortam\u0131 olu\u015fturabilirsiniz. Poi’nin sundu\u011fu bu esnekli\u011fi ke\u015ffetmek, geli\u015ftirme deneyiminizi \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirecektir.
\n<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Vue.js Uygulamas\u0131nda Poi’yi \u00d6zelle\u015ftirme\nGiri\u015f: Vue.js ve Poi\nModern web uygulamalar\u0131 geli\u015ftirirken, geli\u015ftirme s\u00fcrecini kolayla\u015ft\u0131ran ve","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-35316","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-vue","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nVue.js Uygulamas\u0131nda Poi'yi \u00d6zelle\u015ftirme - 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-js-uygulamasinda-poiyi-ozellestirme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vue.js Uygulamas\u0131nda Poi'yi \u00d6zelle\u015ftirme\" \/>\n<meta property=\"og:description\" content=\"Vue.js Uygulamas\u0131nda Poi'yi \u00d6zelle\u015ftirme Giri\u015f: Vue.js ve Poi Modern web uygulamalar\u0131 geli\u015ftirirken, geli\u015ftirme s\u00fcrecini kolayla\u015ft\u0131ran ve\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamasinda-poiyi-ozellestirme\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-28T03:40:44+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=\"16 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamasinda-poiyi-ozellestirme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamasinda-poiyi-ozellestirme\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Vue.js Uygulamas\u0131nda Poi’yi \u00d6zelle\u015ftirme\",\"datePublished\":\"2025-11-28T03:40:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamasinda-poiyi-ozellestirme\/\"},\"wordCount\":2489,\"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-js-uygulamasinda-poiyi-ozellestirme\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamasinda-poiyi-ozellestirme\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamasinda-poiyi-ozellestirme\/\",\"name\":\"Vue.js Uygulamas\u0131nda Poi'yi \u00d6zelle\u015ftirme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-28T03:40:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamasinda-poiyi-ozellestirme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamasinda-poiyi-ozellestirme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamasinda-poiyi-ozellestirme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue.js Uygulamas\u0131nda Poi’yi \u00d6zelle\u015ftirme\"}]},{\"@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.js Uygulamas\u0131nda Poi'yi \u00d6zelle\u015ftirme - 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-js-uygulamasinda-poiyi-ozellestirme\/","og_locale":"tr_TR","og_type":"article","og_title":"Vue.js Uygulamas\u0131nda Poi'yi \u00d6zelle\u015ftirme","og_description":"Vue.js Uygulamas\u0131nda Poi'yi \u00d6zelle\u015ftirme Giri\u015f: Vue.js ve Poi Modern web uygulamalar\u0131 geli\u015ftirirken, geli\u015ftirme s\u00fcrecini kolayla\u015ft\u0131ran ve","og_url":"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamasinda-poiyi-ozellestirme\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-28T03:40:44+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"16 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamasinda-poiyi-ozellestirme\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamasinda-poiyi-ozellestirme\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Vue.js Uygulamas\u0131nda Poi’yi \u00d6zelle\u015ftirme","datePublished":"2025-11-28T03:40:44+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamasinda-poiyi-ozellestirme\/"},"wordCount":2489,"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-js-uygulamasinda-poiyi-ozellestirme\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamasinda-poiyi-ozellestirme\/","url":"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamasinda-poiyi-ozellestirme\/","name":"Vue.js Uygulamas\u0131nda Poi'yi \u00d6zelle\u015ftirme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-28T03:40:44+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamasinda-poiyi-ozellestirme\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamasinda-poiyi-ozellestirme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamasinda-poiyi-ozellestirme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Vue.js Uygulamas\u0131nda Poi’yi \u00d6zelle\u015ftirme"}]},{"@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\/35316","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=35316"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35316\/revisions"}],"predecessor-version":[{"id":35317,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35316\/revisions\/35317"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=35316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=35316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=35316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}