Vue.js: Bibliotecas de UI

Última atualização: 2026-10-20

Uma biblioteca de componentes de interface do usuário permite que você evite reinventar a roda — componentes comuns como Botão, Tabela, Formulário e Modal podem ser usados com apenas algumas linhas de código. O ecossistema do Vue 3 conta com mais de cinco bibliotecas de interface do usuário populares (Element Plus, Naive UI, Vuetify, PrimeVue e Ant Design Vue), e escolher a mais adequada pode economizar 50% do seu tempo de desenvolvimento.

Ao escolher uma biblioteca de interface do usuário, há cinco fatores principais a serem considerados: variedade de componentes / suporte a TypeScript / personalização de temas / tamanho do pacote / atividade da comunidade. Esta aula vai ajudar você a fazer a escolha certa.

1. O que você vai aprender

• Comparação entre 5 bibliotecas de interface do usuário para Vue 3 (Element Plus / Naive UI / Vuetify / PrimeVue / Ant Design Vue)
• Importação sob demanda (unplugin-vue-components)
• Personalização do tema (variáveis CSS / variáveis SCSS)
• Embalagem secundária de componentes (personalizada de acordo com as necessidades da empresa)
• Integração com bibliotecas de ícones (@iconify / unplugin-icons)
• 5 erros comuns

2. O pesadelo de um componente “5-Table” repetido 5 vezes

(1) Desafio: Ter que criar todas as tabelas do zero

O painel de administração da Alice tinha 5 visualizações de tabela diferentes, cada uma criada do zero:

5 tabelas × 200 linhas = 1.000 linhas de código duplicado. Toda vez que você altera um estilo, precisa fazer 5 alterações.

(2) Solução da biblioteca de componentes de interface do usuário: 1 el-table, reutilizado em 5 lugares

<!-- ✅ Correct Version: Use Element Plus el-table -->
<template>
  <el-table :data="orders" stripe>
    <el-table-column prop="id" label="ID" width="80" />
    <el-table-column prop="user" label="User" />
    <el-table-column prop="total" label="Total" :formatter="formatTotal" />
  </el-table>
</template>

<script setup>
import { ElTable, ElTableColumn } from 'element-plus'

const orders = ref([...])
function formatTotal(row) { return `$${row.total}` }
</script>

1 tabela, reutilizada em 5 lugares. Todas as tabelas têm um estilo unificado e interatividade consistente.

(3) Receita

Após usar o Element Plus:

• Tamanho do código: 1.000 linhas → 200 linhas (-80%)
• Consistência de estilo: 100% consistente
• Nova tabela: modelo de 1 linha
• TypeScript: Inferência de tipos completa
• Acessibilidade: Acessibilidade integrada

3. Comparação das 5 principais bibliotecas de interface do usuário do Vue 3

(1) Referência rápida às 5 principais bases de dados

(2) Comparação detalhada em 5 dimensões

(3) 5 dicas importantes para a escolha

4. O Element Plus na prática

(1) Instalação

npm install element-plus @element-plus/icons-vue

(2) Registro global (simples)

(3) Importação sob demanda (recomendado; economiza 50% no tamanho)

npm install -D unplugin-vue-components unplugin-auto-import

// vite.config.ts
import AutoImport from 'unplugin-auto-import'
import Components from 'unplugin-vue-components'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
      dts: 'src/auto-imports.d.ts'
    }),
    Components({
      resolvers: [ElementPlusResolver()],
      dts: 'src/components.d.ts'
    })
  ]
})

(4) 5 componentes principais

▶ Exemplo: 5 Principais Componentes Essenciais

<el-button>Button</el-button>
<el-form>Form</el-form>
<el-table>Table</el-table>
<el-dialog>Dialog</el-dialog>
<el-message>Message</el-message>

Saída:

Botão, formulário, tabela, diálogo e mensagem aparecem com o estilo padrão do Element Plus.
el-dialog e el-message só aparecem quando acionados por código.
Os componentes chegam sem import graças ao resolvedor automático.

5. Personalização do tema

(1) Substituições de variáveis CSS (recomendado)

// src/styles/element-plus.scss
:root {
 --el-color-primary: #42b883; // Change the primary color to Vue Green
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-info: #909399;
  
  --el-border-radius-base: 8px;      // Increase Corner Radius
  --el-font-size-base: 14px;
}

// main.js
import './styles/element-plus.scss'
import 'element-plus/dist/index.css'

(2) Variáveis SCSS (Personalização avançada)

// src/styles/element-plus-vars.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': ('base': #42b883),
    'success': ('base': #67c23a),
    'warning': ('base': #e6a23c),
    'danger':  ('base': #f56c6c),
    'info':    ('base': #909399)
  )
);

// main.js
import './styles/element-plus-vars.scss'
import 'element-plus/dist/index.css'

(3) Modo escuro

// Dark Theme
:root {
  --el-color-primary: #42b883;
  --el-bg-color: #1a1a1a;
  --el-text-color-primary: #ffffff;
}

html.dark {
  --el-bg-color: #1a1a1a;
  --el-text-color-primary: #ffffff;
}

6. Embalagem secundária dos componentes

(1) Exemplo de um componente de negócios

<!-- Usage:3 All set 1 A table -->
<BusinessTable :data="orders" :columns="orderColumns" :total="100" />

(2) 5 principais benefícios do encapsulamento

• Reduzir a duplicação de código: mais de 50 tabelas compartilhadas
• Estilo consistente: Todas as tabelas têm o mesmo estilo
• Personalização empresarial: Carregamento automático + Paginação + Estado vazio
• TypeScript: Props fortemente tipadas
• Fácil de manter: basta alterar em um lugar para que a mudança tenha efeito em N lugares

7. Integração da biblioteca de ícones

(1) Instalação

npm install -D unplugin-icons @iconify-json/carbon

(2) Configuração

// vite.config.ts
import Icons from 'unplugin-icons/vite'
import { FileSystemIconLoader } from 'unplugin-icons/dist/loader'

export default defineConfig({
  plugins: [
    Icons({
      compiler: 'vue3',
      autoInstall: true,  // Automatically Install Icon Sets
      collections: {
        carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default)
      }
    })
  ]
})

(3) Uso

(4) Comparação das 5 principais bibliotecas de ícones

8. Exercício abrangente: personalização de tema do Element Plus

(1) 📊 1. Comparação das 5 principais bibliotecas de interface do usuário

▶ Exemplo: Personalização dos 5 temas principais

// 1. CSS Variable
:root { --el-color-primary: #42b883; }

// 2. SCSS Variable
@forward 'var.scss' with ($colors: ...);

// 3. Dark Mode
:root.dark { --el-bg-color: #1a1a1a; }

// 4. Custom Themes
@import 'element-plus/theme-chalk/dark/css-vars.css';

// 5. Change Theme(Runtime)
document.documentElement.classList.toggle('dark')

Saída:

Trocar --el-color-primary para #42b883 recolore botões e links.
A classe .dark no elemento raiz aplica as variáveis do modo escuro.
A troca em runtime (classList.toggle) muda o tema sem recarregar a página.

(2) 📊 4. 5 Principais bibliotecas de ícones

(3) 📊 5. Referência rápida para 5 erros comuns

▶ Exemplo: Criando um botão e um card «estilo biblioteca» com CSS puro

Saída:

Três botões aparecem: Default / Primary / Delete
Clicar em Delete mostra um loading de 800ms e a mensagem muda para «excluído»
O card exibe o cabeçalho Order #1024, o texto 3 items, total ¥267 e o botão Pay now

❓ Perguntas Frequentes

📖 Resumo

• 5 bibliotecas de interface do usuário para Vue 3: Element Plus / Naive UI / Vuetify / PrimeVue / Ant Design Vue
• O Element Plus é o mais popular na China, com uma ampla seleção de componentes (mais de 80) e suporte a TypeScript
• Importação sob demanda: unplugin-vue-components + ElementPlusResolver
• Personalização do tema: Substituição de variáveis CSS (recomendado) + variáveis SCSS (análise aprofundada)
• Encapsulamento secundário: reduz a duplicação de código nos componentes de negócios
• Iconify: mais de 200.000 ícones + unplugin-icons sob demanda
• 5 bibliotecas de ícones: Iconify / Element / Material / Font Awesome / Heroicons

📝 Exercícios

1. Questões básicas (Dificuldade: ⭐)

   Integração do Element Plus em um projeto Vue 3:

   • Instalar + Importar sob demanda
   • 5 componentes principais (Botão / Formulário / Tabela / Caixa de diálogo / Mensagem)
   • Alterar a cor do tema para a cor principal do projeto

2. Problemas avançados (Dificuldade: ⭐⭐)

   Implementar a integração completa com o Element Plus:

   • 5 integrações de componentes (botão / formulário / tabela / caixa de diálogo / mensagem)
   • Ativar/desativar o modo escuro
   • Iconify Icons (10 ícones diferentes)
   • Re-encapsular o componente BusinessTable

3. Problema de desafio (Dificuldade: ⭐⭐⭐)

   Alcançar a “integração completa da biblioteca de interface do usuário em nível corporativo”:

   1. Element Plus + Naive UI Combinados (Primário + Secundário)
   2. 5 cores principais (primárias / secundárias / de sucesso / de aviso / de perigo)
   3. Modo escuro + Sistema de acompanhamento automático
   4. Mais de 10 componentes comerciais para embalagens secundárias
   5. Criar mais de 200.000 ícones
   6. Tipagem forte do TypeScript
   7. Otimização de desempenho (sob demanda + tree shaking + CDN)

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós