Vue Academy · Ders

Vite Ekosistemi: Eklentiler ve Araçlar

unplugin ekosistemi, vite-plugin-vue, vite-plugin-inspect ve vite-bundle-visualizer.

Vite Ekosistemi: Eklentiler ve Araçlar, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Vite Eklenti Ekosistemi

Vite'ın eklenti sistemi (Rollup'ın arayüzü ve Vite'a özgü kancalar üzerine kuruludur) zengin bir ekosisteme güç verir. Vue projelerinde birkaç eklenti geliştirici deneyimini büyük ölçüde iyileştirir: otomatik içe aktarma, bileşenleri otomatik kaydetme, dönüşümleri inceleme ve paket analizi.

unplugin-auto-import

unplugin-auto-import, yaygın API'leri (Vue'nun ref ve computed işlevleri, yönlendirici/Pinia yardımcıları, kendi bileşim işlevleriniz) otomatik olarak içe aktarır; böylece import ifadeleri yazmadan bunları kullanabilirsiniz.

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      dts: 'src/auto-imports.d.ts'
    })
  ]
})

Bileşim İşlevlerinizi Otomatik İçe Aktarma

Eklentiyi bileşim işlevlerinizin bulunduğu dizine yönelttiğinizde, bu işlevler de genel kapsamda kullanılabilir. TypeScript'in ve düzenleyicinizin bunları anlamaya devam edebilmesi için bir .d.ts oluşturur.

AutoImport({
  imports: ['vue'],
  dirs: ['src/composables'], // auto-import useFoo, useBar
  dts: 'src/auto-imports.d.ts'
})

// in a component, no import needed:
// const x = ref(0); const { user } = useAuth()

unplugin-vue-components

unplugin-vue-components, bileşenleri gerektiğinde otomatik olarak içe aktarır ve kaydeder — şablona <MyButton /> eklediğinizde eklenti bunu otomatik olarak içe aktarır. Ayrıca kullanılmayan bileşenleri ağaç sallar.

import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      dirs: ['src/components'],
      dts: 'src/components.d.ts'
    })
  ]
})

Arayüz Kütüphaneleri için Çözümleyiciler

Bileşen eklentisi, popüler arayüz kütüphaneleri (Element Plus, Vuetify, Naive UI) için çözümleyicileri destekler; bileşenlerini ve stillerini kullanıldıkları anda otomatik olarak içe aktarır. Elle kayıt gerekmez.

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

Components({
  resolvers: [ElementPlusResolver()]
})
// <el-button> now works with no import

vite-plugin-inspect

vite-plugin-inspect, her eklentinin kodunuzu işlem hattı boyunca nasıl dönüştürdüğünü gösteren bir arayüz sunar. Bir dosyanın neden son hâline geldiğini hata ayıklarken son derece değerlidir.

import Inspect from 'vite-plugin-inspect'

export default defineConfig({
  plugins: [Inspect()]
})
// visit http://localhost:5173/__inspect/ in dev

Dönüşüm İşlem Hattını İnceleme

Inspect arayüzünde bir modül seçip her eklentinin dönüşüm adımlarını tek tek inceleyebilirsiniz. Örneğin Vue SFC'sinin oluşturma ve betik bölümlerine nasıl ayrıldığını ve otomatik içe aktarmanın nasıl kod eklediğini görebilir, sorun çıkaran eklentileri tam olarak belirleyebilirsiniz.

Paket Görselleştirici

Üretim paketinin boyutunu anlamak için bir görselleştirici eklenti kullanın (ör. rollup-plugin-visualizer). Derlemeden sonra her parçanın içeriğini etkileşimli bir ağaç haritası olarak gösterir.

import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({ open: true, filename: 'stats.html' })
  ]
})

Görselleştirici Bulgularını Kullanma

Aşırı büyük bağımlılıkları ve yinelenen paketleri bulmak için ağaç haritasını kullanın. Yaygın çözümler şunlardır: ağır yolları/bileşenleri tembel yüklemek, daha hafif kütüphanelere geçmek veya satıcı kodunu bölmek için manualChunks yapılandırmak.

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['vue', 'vue-router', 'pinia']
      }
    }
  }
}

Eklentileri Birleştirme

Bu eklentiler birlikte iyi çalışır. Tipik bir Vue yapılandırmasında en sorunsuz iş akışı için otomatik içe aktarma, bileşenler, inceleme (yalnızca geliştirme) ve görselleştirici (yalnızca derleme) birlikte kullanılır.

plugins: [
  vue(),
  AutoImport({ imports: ['vue', 'vue-router'] }),
  Components({ dirs: ['src/components'] }),
  Inspect(),
  visualizer({ filename: 'stats.html' })
]

d.ts Dosyalarını Git Yoksayma Bilinciyle Yönetme

Otomatik içe aktarma ve bileşen eklentileri .d.ts dosyaları oluşturur. Bunları kaydetmeye (derleme yapmadan sürekli tümleştirmede tür denetimine yardımcı olur) veya Git tarafından yok saymaya (geliştirme başlarken yeniden oluşturulur) karar verin. Her iki durumda da onları tsconfig içlemelerine ekleyin.

Kısa Sınama

Vite araç ekosistemi hakkındaki anlayışınızı sınayın.

Özet

Vite araç ekosistemini öğrendiniz:

unplugin-auto-import — Vue API'lerini ve bileşim işlevlerini otomatik olarak içe aktarır
unplugin-vue-components — arayüz çözümleyicileriyle birlikte bileşenleri otomatik olarak içe aktarır ve kaydeder
vite-plugin-inspect — eklentilerin her modülü nasıl dönüştürdüğünü gösterir
paket görselleştiricisi — iyileştirmelere rehberlik etmek için parça içeriklerini ağaç haritasında gösterir
Bu eklentiler, sorunsuz bir Vue geliştirme/derleme iş akışında birlikte kullanılabilir

Sıkça Sorulan Sorular

“Vite Ekosistemi: Eklentiler ve Araçlar” dersi ücretsiz mi?

Evet — “Vite Ekosistemi: Eklentiler ve Araçlar” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Vite Ekosistemi: Eklentiler ve Araçlar” dersinde ne öğreneceğim?

unplugin ekosistemi, vite-plugin-vue, vite-plugin-inspect ve vite-bundle-visualizer. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Vite Ekosistemi: Eklentiler ve Araçlar” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Vue Vapor Modu: Derleme Zamanı Optimizasyonu
Vite Ekosistemi: Eklentiler ve Araçlar
Vue Makroları ve Topluluk Önerileri
2025 ve Sonrası için Doğru Vue Yığınını Seçme

← Vue Academy Sayfasına Dön