Vue.js: Bibliotecas de UI

Última atualização: 2026-08-26

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:

<!-- ❌ The "Broken" Version:5 A table,5 Different code snippets -->
<!-- OrdersTable.vue -->
<template>
  <table>
    <thead><tr><th>ID</th><th>User</th><th>Total</th></tr></thead>
    <tbody>
      <tr v-for="order in orders" :key="order.id">
        <td>{{ order.id }}</td>
        <td>{{ order.user }}</td>
        <td>${{ order.total }}</td>
      </tr>
    </tbody>
  </table>
</template>

<!-- ProductsTable.vue - Similar -->
<!-- UsersTable.vue - Similar -->
<!-- ... And also 3 more ... -->

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)

// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)

// Register All Icons
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.mount('#app')

(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'
    })
  ]
})

<!-- ✅ Not required import,Automatic On-Demand Import -->
<template>
  <el-button>Click</el-button>
  <el-input v-model="search" />
  <el-table :data="list">
    <el-table-column prop="name" label="Name" />
  </el-table>
</template>

(4) 5 componentes principais

<template>
  <!-- 1. Button -->
  <el-button type="primary" @click="onClick">Primary</el-button>
  
  <!-- 2. Form -->
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="Name" prop="name">
      <el-input v-model="form.name" />
    </el-form-item>
  </el-form>
  
  <!-- 3. Table -->
  <el-table :data="list" stripe>
    <el-table-column prop="name" label="Name" />
  </el-table>
  
  <!-- 4. Dialog -->
  <el-dialog v-model="visible" title="Edit">
    <p>Content</p>
  </el-dialog>
  
  <!-- 5. Message -->
  <el-button @click="$message.success('Saved!')">Click</el-button>
</template>

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

<!-- components/BusinessTable.vue -->
<template>
  <el-table 
    :data="data" 
    v-loading="loading"
    stripe
    border
    :max-height="maxHeight"
  >
    <el-table-column type="index" label="#" width="60" />
    <el-table-column 
      v-for="col in columns" 
      :key="col.key"
      :prop="col.key" 
      :label="col.label"
      :width="col.width"
      :formatter="col.formatter"
    />
  </el-table>
  
  <el-pagination
    v-model:current-page="page"
    v-model:page-size="size"
    :total="total"
    :page-sizes="[10, 20, 50, 100]"
    layout="total, sizes, prev, pager, next"
    @current-change="onPage"
    @size-change="onSize"
  />
</template>

<script setup lang="ts">
// Business Encapsulation:Automatic loading + Pagination + Column Definition
const props = defineProps<{
  data: any[]
  columns: Array<{ key: string; label: string; width?: number; formatter?: Function }>
  total: number
  loading?: boolean
  maxHeight?: number
}>()

const emit = defineEmits<{
  'update:page': [page: number]
  'update:size': [size: number]
}>()

const page = ref(1)
const size = ref(20)

function onPage(p) { emit('update:page', p) }
function onSize(s) { emit('update:size', s) }
</script>

<!-- 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

<template>
  <!-- Carbon Icon (100,000+) -->
  <IconCarbonUser size="20" />
  <IconCarbonShoppingCart size="24" color="green" />
  <IconCarbonTrashCan size="20" @click="delete" />
</template>

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

8. Exemplos completos: 5 cenários utilizando as principais bibliotecas de interface do usuário

▶ Exemplo: 1. Comparação das 5 principais bibliotecas de interface do usuário

▶ Exemplo: 2. 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>

▶ Exemplo: 3. 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')

▶ Exemplo: 4. 5 Principais bibliotecas de ícones

▶ Exemplo: 5. Referência rápida para 5 erros comuns

❓ Perguntas Frequentes

P: Qual das 5 principais bibliotecas de interface do usuário devo escolher? R: Para interfaces internas de backend e administração → Element Plus (a mais popular). Para SaaS modernos → Naive UI (pequena, mas elegante). Para aplicativos no estilo Material → Vuetify. Para o ecossistema Ant Design → Ant Design Vue.

P: Importação completa x importação sob demanda? R: A importação completa é simples, mas resulta em um pacote grande (500 KB). Recomendamos a importação sob demanda (unplugin-vue-components), que reduz o tamanho em 50%.

P: Como faço para alterar as cores do tema Element Plus? R: Substitua a variável CSS --el-color-primary. Para personalizar variáveis SCSS, é necessário compilar o tema usando o plugin unplugin-element-plus.

P: O Element Plus oferece suporte total ao TypeScript? R: Sim. O Element Plus 2.x foi totalmente reescrito em TypeScript e oferece inferência de tipos completa.

P: É possível misturar bibliotecas de interface do usuário (por exemplo, Element Plus + Naive UI)? R: Tecnicamente, sim, mas resolver conflitos de estilo pode ser difícil. Não recomendamos misturá-las; em vez disso, escolha uma biblioteca principal e uma biblioteca leve (por exemplo, Element Plus + Headless UI).

P: unplugin-vue-components x registro global? R: O unplugin importa automaticamente os componentes conforme a necessidade, resultando em um pacote 50% menor. O registro global é simples, mas resulta em um pacote maior. Recomendamos o carregamento sob demanda.

P: Como escolho uma biblioteca de ícones? R: Iconify (mais de 200.000 ícones em vários conjuntos) + unplugin-icons, conforme necessário. Sem sobrecarga de execução.

📖 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