# vue-element-demo

**Repository Path**: albert1996/vue-element-demo

## Basic Information

- **Project Name**: vue-element-demo
- **Description**: 使用claude生成的前端代码用于学习
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-22
- **Last Updated**: 2026-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + Element Plus 综合演示项目

基于 **Vue 3**（Composition API / `<script setup>`）、**Element Plus**、**Vue Router 4**、**Vite** 构建的前端组件综合演示应用，涵盖 7 个演示页面，覆盖 Element Plus 大部分常用组件。

## 技术栈

| 技术 | 版本 | 用途 |
|------|------|------|
| Vue | ^3.5 | 渐进式前端框架（Composition API） |
| Element Plus | ^2.14 | 桌面端 UI 组件库 |
| Vue Router | ^4.6 | 前端路由（Hash 模式） |
| Vite | ^8.0 | 构建工具（开发服务器 + 打包） |
| Axios | ^1.16 | HTTP 客户端 |
| dayjs | ^1.11 | 日期处理库 |
| @element-plus/icons-vue | ^2.3 | Element Plus 图标库 |

## 项目结构

```
vue-element-demo/
├── .gitignore              # Git 忽略规则（node_modules, dist, 日志文件等）
├── .vscode/
│   └── extensions.json     # VS Code 推荐插件（Volar）
├── index.html              # 应用入口 HTML 文件
├── package.json            # 项目元信息、脚本命令、依赖声明
├── package-lock.json       # 依赖锁定文件（保证一致性安装）
├── vite.config.js          # Vite 构建配置（别名、端口、自动打开浏览器）
├── README.md               # 项目说明文档（本文件）
├── public/
│   ├── favicon.svg         # 网站图标（浏览器标签栏显示）
│   └── icons.svg           # SVG 图标精灵集（Bluesky、Discord、GitHub、X 等）
└── src/
    ├── main.js             # Vue 应用入口：创建实例、注册 Element Plus（中文）、全局图标
    ├── App.vue             # 根组件：侧边栏 + 顶部导航 + 面包屑 + 路由出口 + 底部栏
    ├── style.css           # 全局样式：CSS Reset、布局工具类、间距原子类
    ├── router/
    │   └── index.js        # Vue Router 路由配置（7 个路由 + 根路径重定向）
    └── views/
        ├── Dashboard.vue   # 仪表盘：统计卡片（数字动画）、柱状图、日历、员工表格
        ├── FormDemo.vue    # 表单演示：基础表单、高级表单、密码强度、文件上传、穿梭框
        ├── TableDemo.vue   # 表格演示：排序筛选、多选批量操作、行内编辑、CSV 导出、树形表格
        ├── DialogDemo.vue  # 弹窗演示：Dialog、Drawer、MessageBox、Notification、Message
        ├── NavigationDemo.vue  # 导航演示：Tabs、Steps、Breadcrumb、Dropdown、Menu、Pagination、Collapse
        ├── DataDisplay.vue # 数据展示：Tree、Timeline、Calendar、Progress、Tags、Badge、Avatar
        └── MiscDemo.vue    # 其他组件：Loading、虚拟列表、axios 模拟、dayjs、防抖、水印
```

## 各文件详细说明

### 根目录配置文件

#### `index.html`
应用入口 HTML。设置 `lang="zh-CN"`、引入 favicon、声明 `<div id="app">` 挂载点，通过 `<script type="module" src="/src/main.js">` 加载 Vue 应用。

#### `vite.config.js`
Vite 构建配置：
- **@vitejs/plugin-vue** — 让 Vite 支持 `.vue` 单文件组件
- **路径别名** — `@` 映射到 `src/` 目录，方便导入
- **开发服务器** — 端口 3000，启动时自动打开浏览器

#### `package.json`
- **scripts**：`dev`（启动开发服务器）、`build`（生产打包）、`preview`（预览构建产物）
- **dependencies**：Vue 3、Element Plus、Vue Router、Axios、dayjs
- **devDependencies**：Vite、@vitejs/plugin-vue

#### `.gitignore`
忽略 `node_modules`、`dist`、日志文件（`*.log`）、系统文件（`.DS_Store`）等。保留 `.vscode/extensions.json`（推荐插件配置）。

### `public/` 目录

#### `favicon.svg`
SVG 格式的网站图标，蓝色圆角矩形底 + 白色字母 "E"（Element）。

#### `icons.svg`
SVG 图标精灵（symbol sprite），包含 Bluesky、Discord、GitHub、X 等社交平台图标，以及文档、社教等自定义图标。通过 `<use href="/icons.svg#xxx-icon">` 引用。

### `src/` 源码目录

#### `main.js` — 应用入口
1. 导入 `createApp` 创建 Vue 应用实例
2. 导入 Element Plus 及其全局 CSS 和中文语言包
3. 通过 `Object.entries()` 遍历 + `app.component()` 全局注册所有 Element Plus 图标（无需手动导入即可在模板中使用 `<el-icon><Edit /></el-icon>`）
4. 链式注册插件：`app.use(ElementPlus, { locale: zhCn }).use(router).mount('#app')`

#### `App.vue` — 根组件（主布局）
使用 Element Plus 容器布局（`el-container` / `el-aside` / `el-header` / `el-main` / `el-footer`）构建整体框架：

- **侧边栏**：可折叠菜单（`el-menu`），含 Logo 区、7 个菜单项（图标 + 文字），通过 `router` 属性实现点击跳转
- **顶部导航栏**：折叠按钮（切换图标）、面包屑导航、折叠开关、技术栈标签
- **主内容区**：`<router-view>` 路由出口，包裹 `<transition>` 实现淡入淡出动画
- **底部栏**：版权信息
- **核心逻辑**：`isCollapse` 控制菜单折叠状态；`watch(route.meta.title)` 动态更新浏览器标题；`handleSelect()` 处理菜单选择跳转

#### `style.css` — 全局样式
- **CSS Reset**：`* { margin:0; padding:0; box-sizing:border-box }`，`html/body/#app` 高度 100%
- **工具类**：`.page-container`（页面内边距）、`.page-header`（标题区）、`.section-card`（卡片间距）、`.section-title`（分区标题 + 底部分割线）
- **Flex 工具**：`.flex-row`（水平排列 + 12px 间距 + 自动换行）、`.flex-column`（纵向排列）
- **间距原子类**：`.mt-16`、`.mb-16`、`.ml-8`、`.mr-8`

#### `router/index.js` — 路由配置
- **Hash 模式**（`createWebHashHistory`）：URL 格式 `/#/dashboard`，兼容性好，无需服务端配置
- **路由懒加载**：所有页面组件使用 `() => import('@/views/...')` 动态导入，按需加载独立 chunk
- **路由表**：根路径 `/` 重定向到 `/dashboard`，7 个页面路由，每个含 `meta.title`（用于面包屑和页面标题）

### `src/views/` 页面组件

#### `Dashboard.vue` — 仪表盘
**功能**：数据总览首页，展示统计卡片、趋势图、员工列表

**演示要点**：
- `reactive()` 深层响应式数据（统计卡片数组）
- `onMounted()` 生命周期钩子，触发数字递增动画（easeOutCubic 缓动函数，`setInterval` 每 16ms 更新，约 60fps）
- 响应式栅格（`el-row` / `el-col`，支持 `xs`/`sm`/`lg` 断点）
- 纯 CSS 柱状图（`linear-gradient` 渐变背景，数据驱动高度）
- 日历组件（`el-calendar`）+ 进度条（`el-progress`）
- 表格（`el-table`）：斑马纹、排序、自定义列模板、动态 Tag 类型、分页

#### `FormDemo.vue` — 表单综合演示
**功能**：展示所有表单相关组件和验证模式

**基础表单**：
- `el-input`（文本、多行文本）、`el-select`、`el-checkbox-group`、`el-radio-group`
- 验证规则（`required`、`min`/`max`、正则 `pattern`、`type: 'array'`）
- 自定义 `validator`（异步回调式校验，验证两次密码一致、协议勾选）

**高级表单**：
- `el-input-number`（min/max/step）、`el-rate`（评分）、`el-cascader`（级联选择器）
- `el-color-picker`（颜色选择器，show-alpha）、`el-switch`、`el-slider`（刻度标记）
- `el-upload`（文件上传，`before-upload` 格式/大小校验，`on-change` 预览）
- `el-transfer`（穿梭框，filterable 可搜索）
- 密码强度指示器（`computed` 基于密码包含的字符类别评分，动态颜色 + 进度条）
- 表单缓存（`sessionStorage.setItem` 序列化表单数据）
- 消息反馈：`ElMessage`、`ElMessageBox.confirm`、`ElNotification` 三种方式

#### `TableDemo.vue` — 表格综合演示
**功能**：完整的数据表格操作演示

- **数据生成**：`Array.from({ length: count }, mapFn)` 批量生成模拟数据
- **筛选排序**：`computed()` 实现纯前端筛选 + 排序（`Array.filter()` → `[...data].sort()`）
- **多选批量操作**：`el-table-column type="selection"` + `@selection-change`，使用 `Set` 实现 O(1) 去重删除
- **行内编辑**：双击切换编辑态（`editingRow` / `editingCol` 控制），`@blur` / `@keyup.enter` 完成编辑
- **CSV 导出**：纯前端实现（拼接 CSV 字符串 → `Blob` → `URL.createObjectURL` → 触发下载 → `revokeObjectURL` 释放内存，BOM 确保 Excel 正确识别 UTF-8）
- **树形表格**：嵌套 `children` 数据 + `tree-props` 配置，展开/折叠全部
- **汇总行**：`show-summary` + 自定义 `summary-method`（`reduce()` 累加薪资，计算平均分）
- **分页**：`v-model:current-page` / `v-model:page-size` 双向绑定
- **删除确认**：`ElMessageBox.confirm` + `el-popconfirm` 两种确认方式
- **审核流程**：行状态映射表（`statusTypeMap` 对象），审核按钮根据状态切换

#### `DialogDemo.vue` — 弹窗与消息
**功能**：展示所有反馈/弹窗类组件

- **Dialog**：基础弹窗（`draggable` 拖拽，`close-on-click-modal: false`）、表单弹窗、全屏弹窗
- **Drawer**：四方向抽屉（rtl/ltr/ttb/btt），内含 Timeline 时间线
- **MessageBox**：`confirm`（返回 Promise）、`prompt`（`inputPattern` 正则校验输入）、`alert`（`center` 居中）、自定义弹窗（`h()` 渲染函数创建 VNode）
- **Notification**：四种类型通知（success/warning/info/error），`h()` 渲染复杂内容（按钮等）
- **Message**：动态调用 `ElMessage[type]()`（方括号动态访问方法），模拟加载提示
- **Popover**：click 触发 / hover 触发（`trigger` 属性），表格气泡（内嵌 `el-table`）
- **Tooltip**：dark 主题、多行文字提示

#### `NavigationDemo.vue` — 导航与步骤
**功能**：展示所有导航类组件

- **Tabs**：四方向切换（top/right/bottom/left）、card 风格、可增删标签页（`closable` + `@tab-remove`，`splice` 删除后自动切换）
- **Steps**：带图标和描述的步骤条、简洁样式（`simple`）、垂直方向（`direction="vertical"`）、自定义图标（`#icon` 插槽）
- **Breadcrumb**：自定义分隔符 `>`，路由跳转
- **Dropdown**：`@command` 回调（参数为 `command` 属性值）、分裂按钮（`split-button`）
- **Menu**：`el-sub-menu` 子菜单嵌套、当前选中状态联动右侧内容区
- **Pagination**：基础分页、完整分页（`layout="total, sizes, prev, pager, next, jumper"`）、小型分页
- **Collapse**：手风琴效果（`v-model` 绑定展开项数组）
- **InfiniteScroll**：`v-infinite-scroll` 指令，滚动触底自动加载（`loadingMore` 锁防重复触发），最多 50 条

#### `DataDisplay.vue` — 数据展示
**功能**：展示所有数据展示/状态类组件

- **Tree**：嵌套 `children` 结构、`show-checkbox` 多选、`filter-node-method` 节点筛选、`highlight-current` 高亮、`default-expand-all` 全部展开
- **Timeline**：带颜色和尺寸的时间线（`hollow` 控制实心/空心）、大号节点
- **Calendar**：`#date-cell` 作用域插槽自定义日期单元格渲染、选中高亮
- **Progress**：线形（`striped` / `striped-flow` / `text-inside`）、环形、仪表盘（`dashboard`）、渐变颜色数组
- **Tags**：动态增删（`v-if` 切换输入框，`@keyup.enter` / `@blur` 确认，`Array.filter()` 删除）
- **Badge**：数字徽章、点徽章、隐藏/显示零值
- **Avatar**：文字头像（`slice(0,1)` 取名字首字）、图标头像、图片头像；不同尺寸和形状（circle/square）
- **Descriptions**：带边框的描述列表（`:column="1"` 单列）
- **Skeleton**：`el-skeleton animated` 骨架屏加载动画，`setTimeout` 2 秒后切换到真实内容
- **Empty**：空状态（默认 + 自定义图片 + 操作按钮）
- **Result**：成功结果页（`icon="success"` + `#extra` 额外操作按钮）
- **Image**：`fit="cover"` 填充模式、`preview-src-list` 预览、`lazy` 懒加载、`#error` 加载失败占位
- **Statistic**：统计数值（`#prefix` / `#suffix` 插槽）、`time-indices` 模式倒计时

#### `MiscDemo.vue` — 其他组件
**功能**：展示剩余组件以及 JavaScript 工具演示

- **Loading**：`v-loading.fullscreen.lock` 整页加载 + `v-loading` 区域加载
- **Alert**：四种类型的页面内警告条（success/info/warning/error）
- **Text**：`truncated` + `:line-clamp` 多行截断、不同颜色类型、`tag="del"` 删除线 / `tag="mark"` 标记
- **Link**：`target="_blank"` 新窗口、`:underline="false"`、`disabled`、图标链接
- **Divider**：水平分割线（文字位置 left/center/right）、垂直分割线、虚线
- **Button**：所有类型/变体（plain、round、circle、link）、四种尺寸、按钮组无缝拼接
- **虚拟列表**：简易实现（10000 条数据，`computed` 计算可见切片 `slice(start, end)`，`position: absolute` + `top` 定位，`scrollTop / itemHeight` 计算起始索引）
- **axios 模拟请求**：`async/await` + `try/catch/finally` + `Promise` 封装 `setTimeout` 模拟异步
- **dayjs 日期处理**：`format()` 格式化、`fromNow()` 相对时间（需 `relativeTime` 插件）、`diff()` 时间差
- **防抖**：`clearTimeout` + `setTimeout` 实现，输入停止 500ms 后更新结果
- **Clipboard API**：`navigator.clipboard.writeText()` 复制文本到剪贴板
- **Popconfirm**：气泡确认框
- **Watermark**：文字水印组件
- **Backtop**：回到顶部按钮

## 启动方式

```bash
# 安装依赖
npm install

# 启动开发服务器（自动打开 http://localhost:3000）
npm run dev

# 生产环境构建
npm run build

# 预览构建产物
npm run preview
```

## VS Code 配置

项目 `.vscode/extensions.json` 推荐安装 **Volar**（Vue 3 官方 IDE 扩展），提供 `.vue` 文件语法高亮、类型检查、组件自动补全等功能。