Vue.js: UI 组件库集成

<!-- ✅ 正确版：用 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>

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

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

初始渲染：白底描边"默认按钮"、蓝色大号"主要按钮"、红色"删除"；下方卡片标题"订单 #1024"，正文是合计金额和一个蓝色小号按钮，底部提示"等待操作"。
点"删除"：按钮先变灰显示"⏳ 删除"（loading 期间不可重复点击），提示变"正在删除…"；约 800ms 后恢复可点，提示变"已删除（模拟请求完成）"。
同一套 type / size / loading / disabled + slot 组合出 4 种外观——这正是 Element Plus 这类库的本质：统一视觉 + 统一 API 的组件。

// src/styles/element-plus.scss
:root {
  --el-color-primary: #42b883;       // 主色改为 Vue 绿
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-info: #909399;
  
  --el-border-radius-base: 8px;      // 圆角加大
  --el-font-size-base: 14px;
}

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

// 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'

// 暗色主题
: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;
}

/* 1. CSS 变量（推荐） */
:root { --el-color-primary: #42b883; }

/* 2. SCSS 变量（深度定制） */
@forward 'var.scss' with ($colors: ...);

/* 3. 暗色模式 */
:root.dark { --el-bg-color: #1a1a1a; }

/* 4. 自定义主题 */
@import 'element-plus/theme-chalk/dark/css-vars.css';

/* 5. 运行时切换 */
document.documentElement.classList.toggle('dark')

主色由 Element Plus 默认蓝变为 #42b883，按钮、链接、选中态等同步变绿。
给根节点加 dark class 后背景、文字和组件切换为暗色；执行 classList.toggle('dark') 可在明暗主题间实时切换。

<!-- 使用：3 行搞定 1 个表格 -->
<BusinessTable :data="orders" :columns="orderColumns" :total="100" />

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

// 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,  // 自动安装图标集
      collections: {
        carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default)
      }
    })
  ]
})

<!-- 需 Vite + npm install element-plus -->
<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>

页面渲染一个 Element Plus 主色按钮、一个表单、一个表格、一个默认隐藏的对话框，以及一条消息提示。
点击按钮出现 Element Plus 的点击态；表格显示表头与数据行；调用对话框后以居中遮罩弹层出现。