Vue Academy · Aula

Ecossistema Vite: plugins e ferramentas

Ecossistema unplugin, vite-plugin-vue, vite-plugin-inspect e vite-bundle-visualizer.

Ecossistema Vite: plugins e ferramentas é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

O ecossistema de plug-ins do Vite

O sistema de plug-ins do Vite (construído sobre a interface do Rollup e os ganchos específicos do Vite) impulsiona um ecossistema rico. Para projetos Vue, alguns plug-ins melhoram significativamente a experiência de desenvolvimento: importações automáticas, registro automático de componentes, inspeção de transformações e análise de pacotes.

unplugin-auto-import

unplugin-auto-import importa automaticamente interfaces comuns (as funções do Vue ref e computed, auxiliares do Router/Pinia e suas próprias funções reutilizáveis), para que você possa usá-las sem escrever instruções de importação.

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

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

Importação automática das suas funções reutilizáveis

Aponte o plug-in para o diretório das suas funções reutilizáveis, e essas funções também ficarão disponíveis globalmente. Ele gera um arquivo .d.ts para que o TypeScript e seu editor continuem entendendo essas funções.

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 componentes sob demanda — basta inserir <MyButton /> em um modelo para que o plug-in o importe automaticamente. Ele também elimina componentes não utilizados da árvore de dependências.

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

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

Resolvedores para bibliotecas de interface

O plug-in de componentes é compatível com resolvedores para bibliotecas de interface populares (Element Plus, Vuetify e Naive UI), importando automaticamente seus componentes e estilos quando são usados — sem registro manual.

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

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

vite-plugin-inspect

vite-plugin-inspect disponibiliza uma interface para ver como cada plug-in transforma seu código ao longo do fluxo. Ele é indispensável para depurar por que um arquivo termina da forma como termina.

import Inspect from 'vite-plugin-inspect'

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

Lendo o fluxo de transformação

Na interface do Inspect, escolha um módulo e percorra a transformação feita por cada plug-in. Você pode ver, por exemplo, como o SFC do Vue é dividido em renderização e código e como a importação automática insere código — identificando exatamente os plug-ins que estão se comportando mal.

Visualizador de pacotes

Para entender o tamanho do pacote de produção, use um plug-in de visualização (por exemplo, rollup-plugin-visualizer). Ele gera um mapa de árvore interativo mostrando o conteúdo de cada fragmento após a compilação.

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

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

Agindo com base nas informações do visualizador

Use o mapa de árvore para identificar dependências grandes e pacotes duplicados. Correções comuns: carregue rotas e componentes pesados sob demanda, troque por bibliotecas mais leves ou configure manualChunks para dividir o código das dependências.

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

Combinando os plug-ins

Esses plug-ins se combinam bem. Uma configuração Vue típica reúne importação automática, componentes, inspeção (somente no desenvolvimento) e um visualizador (somente na compilação) para proporcionar o fluxo de trabalho mais simples.

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

Arquivos .d.ts e a lista de ignorados do Git

Os plug-ins de importação automática e de componentes geram arquivos .d.ts. Decida se deseja versioná-los (isso ajuda a integração contínua a verificar os tipos sem uma compilação) ou adicioná-los à lista de ignorados do Git (eles são regenerados ao iniciar o desenvolvimento). Inclua-os nas inclusões de tsconfig de qualquer forma.

Verificação rápida

Teste sua compreensão do ecossistema de ferramentas do Vite.

Recapitulação

Você aprendeu sobre o ecossistema de ferramentas do Vite:

unplugin-auto-import — importa automaticamente APIs e funções reutilizáveis do Vue
unplugin-vue-components — importa e registra componentes automaticamente, com resolvedores de interface
vite-plugin-inspect — mostra como os plug-ins transformam cada módulo
visualizador de pacotes — mapa de árvore do conteúdo dos fragmentos para orientar a otimização
Esses plug-ins se combinam em um fluxo de desenvolvimento e compilação Vue simples

Perguntas Frequentes

A aula “Ecossistema Vite: plugins e ferramentas” é grátis?

Sim — o texto completo de “Ecossistema Vite: plugins e ferramentas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Ecossistema Vite: plugins e ferramentas”?

Ecossistema unplugin, vite-plugin-vue, vite-plugin-inspect e vite-bundle-visualizer. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Ecossistema Vite: plugins e ferramentas”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Modo Vapor do Vue: otimização em tempo de compilação
Ecossistema Vite: plugins e ferramentas
Macros do Vue e propostas da comunidade
Escolha da stack Vue adequada para 2025+

← Voltar para Vue Academy