Vue Academy · Pelajaran

Ekosistem Vite: Plugin dan Peralatan

Ekosistem unplugin, vite-plugin-vue, vite-plugin-inspect, serta vite-bundle-visualizer.

Ekosistem Vite: Plugin dan Peralatan adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Ekosistem Pengaya Vite

Sistem pengaya Vite (dibangun di atas antarmuka Rollup serta pengait khusus Vite) mendukung ekosistem yang kaya. Untuk proyek Vue, beberapa pengaya sangat meningkatkan pengalaman pengembang: impor otomatis, pendaftaran komponen otomatis, pemeriksaan transformasi, dan analisis bundel.

unplugin-auto-import

unplugin-auto-import mengimpor API umum secara otomatis (API Vue seperti ref, computed, pembantu Router/Pinia, serta komposabel Anda sendiri), sehingga Anda dapat menggunakannya tanpa menulis pernyataan impor.

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

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

Mengimpor Komposabel Secara Otomatis

Arahkan pengaya ini ke direktori komposabel Anda, dan fungsi-fungsi tersebut juga akan tersedia secara global. Pengaya ini menghasilkan .d.ts agar TypeScript dan editor Anda tetap dapat memahaminya.

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 mengimpor dan mendaftarkan komponen sesuai kebutuhan — letakkan <MyButton /> dalam templat, dan pengaya tersebut akan mengimpornya secara otomatis. Pengaya ini juga menghapus komponen yang tidak digunakan dari bundel.

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

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

Penyelesai untuk Pustaka UI

Pengaya komponen mendukung penyelesai untuk pustaka UI populer (Element Plus, Vuetify, Naive UI), dengan mengimpor komponen dan gayanya secara otomatis saat digunakan — tanpa pendaftaran manual.

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

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

vite-plugin-inspect

vite-plugin-inspect menyediakan antarmuka untuk melihat cara setiap pengaya mengubah kode Anda melalui alur pemrosesan. Fitur ini sangat berguna untuk men-debug alasan sebuah berkas berakhir dalam bentuk tertentu.

import Inspect from 'vite-plugin-inspect'

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

Membaca Alur Transformasi

Dalam antarmuka Inspect, pilih sebuah modul lalu telusuri transformasi yang dilakukan setiap pengaya. Anda dapat melihat, misalnya, cara SFC Vue dipecah menjadi perenderan dan skrip, serta cara impor otomatis menyisipkan kode — sehingga pengaya yang bermasalah dapat ditemukan dengan tepat.

Visualisator Bundel

Untuk memahami ukuran bundel produksi, gunakan pengaya visualisasi (misalnya rollup-plugin-visualizer). Pengaya ini menghasilkan peta pohon interaktif yang menunjukkan isi setiap potongan setelah kompilasi.

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

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

Menindaklanjuti Wawasan Visualisasi

Gunakan peta pohon untuk menemukan dependensi yang terlalu besar dan paket yang terduplikasi. Perbaikan umum meliputi memuat rute/komponen berat secara lambat, beralih ke pustaka yang lebih ringan, atau mengonfigurasi manualChunks untuk memisahkan kode dependensi.

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

Menggabungkan Pengaya

Pengaya-pengaya ini dapat dikombinasikan dengan baik. Konfigurasi Vue yang umum menyusun impor otomatis, komponen, pemeriksaan (khusus pengembangan), dan visualisator (khusus kompilasi) bersama-sama untuk alur kerja yang paling lancar.

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

Memahami Berkas dts yang Diabaikan Git

Pengaya impor otomatis dan komponen menghasilkan berkas .d.ts. Tentukan apakah berkas tersebut akan disimpan di repositori (membantu CI melakukan pemeriksaan tipe tanpa kompilasi) atau dikecualikan dari Git (dibuat ulang saat pengembangan dimulai). Sertakan berkas tersebut dalam daftar tsconfig yang disertakan, apa pun pilihan Anda.

Pemeriksaan Singkat

Uji pemahaman Anda tentang ekosistem perkakas Vite.

Ringkasan

Anda telah mempelajari ekosistem perkakas Vite:

unplugin-auto-import — mengimpor API dan komposabel Vue secara otomatis
unplugin-vue-components — mengimpor/mendaftarkan komponen secara otomatis, dengan penyelesai UI
vite-plugin-inspect — melihat cara pengaya mengubah setiap modul
visualisator bundel — peta pohon isi potongan untuk membantu pengoptimalan
Pengaya-pengaya ini dapat digabungkan menjadi alur kerja pengembangan/kompilasi Vue yang lancar

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Ekosistem Vite: Plugin dan Peralatan” gratis?

Ya — teks lengkap “Ekosistem Vite: Plugin dan Peralatan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Ekosistem Vite: Plugin dan Peralatan”?

Ekosistem unplugin, vite-plugin-vue, vite-plugin-inspect, serta vite-bundle-visualizer. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Ekosistem Vite: Plugin dan Peralatan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Mode Vue Vapor: Optimasi Saat Kompilasi
Ekosistem Vite: Plugin dan Peralatan
Makro Vue dan Proposal Komunitas
Memilih Stack Vue yang Tepat untuk 2025+

← Kembali ke Vue Academy