Vue.js: UI 组件库集成

<!-- ❌ 翻车版：5 个表格，5 份不同代码 -->
<!-- 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 - 类似 -->
<!-- UsersTable.vue - 类似 -->
<!-- ... 还有 3 个 ... -->

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

// main.js
const { createApp } = 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)

// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.mount('#app')

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

<!-- ✅ 无需 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>

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

// 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;
}

<!-- 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">
// 业务封装：自动 loading + 分页 + 列定义
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>

<!-- 使用：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)
      }
    })
  ]
})

<template>
  <!-- Carbon 图标（10万+ 个） -->
  <IconCarbonUser size="20" />
  <IconCarbonShoppingCart size="24" color="green" />
  <IconCarbonTrashCan size="20" @click="delete" />
</template>

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

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