Vue Academy · Lezione

Ecosistema Vite: plugin e strumenti

Ecosistema unplugin, vite-plugin-vue, vite-plugin-inspect, vite-bundle-visualizer.

Ecosistema Vite: plugin e strumenti è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

L'ecosistema dei plugin di Vite

Il sistema di plugin di Vite (basato sull'interfaccia di Rollup e su hook specifici di Vite) alimenta un ecosistema ricco. Nei progetti Vue, alcuni plugin migliorano notevolmente l'esperienza di sviluppo: import automatici, registrazione automatica dei componenti, ispezione delle trasformazioni e analisi dei bundle.

unplugin-auto-import

unplugin-auto-import importa automaticamente le API comuni (come ref e computed di Vue, gli helper di Router/Pinia e i Suoi composable), consentendo di usarle senza scrivere istruzioni di importazione.

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

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

Importare automaticamente i propri composable

Indichi la cartella dei composable e anche queste funzioni diventeranno disponibili globalmente. Il plugin genera un file .d.ts, così TypeScript e il Suo editor continuano a riconoscerle.

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 importa e registra automaticamente i componenti quando servono: inserisca <MyButton /> in un template e il plugin lo importerà automaticamente. Inoltre applica il tree-shaking ai componenti inutilizzati.

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

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

Resolver per le librerie UI

Il plugin per i componenti supporta i resolver per le librerie UI più diffuse (Element Plus, Vuetify, Naive UI), importando automaticamente i relativi componenti e stili quando vengono utilizzati, senza registrazione manuale.

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

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

vite-plugin-inspect

vite-plugin-inspect espone un'interfaccia per vedere come ogni plugin trasforma il codice lungo la pipeline. È preziosissimo per capire perché un file assume la forma finale che presenta.

import Inspect from 'vite-plugin-inspect'

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

Leggere la pipeline delle trasformazioni

Nell'interfaccia Inspect selezioni un modulo e segua la trasformazione applicata da ciascun plugin. Può vedere, per esempio, come il Vue SFC venga suddiviso in render e script e come auto-import inserisca il codice, individuando con precisione i plugin che causano problemi.

Visualizzatore del bundle

Per comprendere le dimensioni del bundle di produzione, utilizzi un plugin visualizer (ad esempio rollup-plugin-visualizer). Dopo la build, genera una treemap interattiva dei contenuti di ogni chunk.

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

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

Agire sulle informazioni del visualizer

Utilizzi la treemap per individuare dipendenze troppo grandi e pacchetti duplicati. Le soluzioni comuni sono: caricare lazy route o componenti pesanti, passare a librerie più leggere oppure configurare manualChunks per suddividere il codice dei vendor.

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

Combinare i plugin

Questi plugin si combinano bene. Una configurazione Vue tipica unisce auto-import, componenti, Inspect (solo in sviluppo) e un visualizer (solo durante la build) per ottenere un flusso di lavoro il più fluido possibile.

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

Gestire i file dts e il gitignore

I plugin per gli import automatici e i componenti generano file .d.ts. Decida se inserirli nel repository (facilita il controllo dei tipi in CI senza una build) oppure aggiungerli a gitignore (vengono rigenerati all'avvio dello sviluppo). In entrambi i casi, li includa nelle voci tsconfig.

Verifica rapida

Verifichi la Sua comprensione dell'ecosistema degli strumenti di Vite.

Riepilogo

Ha imparato a conoscere l'ecosistema degli strumenti di Vite:

unplugin-auto-import — importa automaticamente le API e i composable di Vue
unplugin-vue-components — importa e registra automaticamente i componenti, con resolver per le librerie UI
vite-plugin-inspect — mostra come i plugin trasformano ciascun modulo
bundle visualizer — mostra una treemap dei contenuti dei chunk per guidare l'ottimizzazione
questi plugin si combinano in un flusso di lavoro fluido per lo sviluppo e la build di Vue

Domande Frequenti

La lezione «Ecosistema Vite: plugin e strumenti» è gratuita?

Sì — il testo completo di «Ecosistema Vite: plugin e strumenti» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Ecosistema Vite: plugin e strumenti»?

Ecosistema unplugin, vite-plugin-vue, vite-plugin-inspect, vite-bundle-visualizer. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Ecosistema Vite: plugin e strumenti»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Modalità Vapor di Vue: ottimizzazione a compile time
Ecosistema Vite: plugin e strumenti
Macro di Vue e proposte della community
Scelta dello stack Vue giusto per il 2025 e oltre

← Torna a Vue Academy