# chapter11

**Repository Path**: henryong/chapter11

## Basic Information

- **Project Name**: chapter11
- **Description**: 第11章 Element Plus 案例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-11-30
- **Last Updated**: 2025-11-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vite-tw-templ（第10章：UI组件库和样式框架示例）

一个基于 Vue 3 + Vite 的示例项目，集成 Tailwind CSS 与 Element Plus，演示常见 UI 模式与页面结构（标签、骨架延迟、表单、记录编辑、滑块开关、消息提示、表格、菜单、布局、学生管理等）。

## 技术栈

- 核心框架：`vue@3`、`vite@5`
- 路由管理：`vue-router@4`
- 状态管理：`pinia`
- UI 组件库：`element-plus`、`@element-plus/icons-vue`
- 样式与构建：`tailwindcss`、`postcss`、`autoprefixer`
- 自动导入与组件：`unplugin-auto-import`、`unplugin-vue-components`（含 `ElementPlusResolver`）
- 图标组件：`unplugin-icons`
- 调试辅助：`vite-plugin-inspect`

## 开发与构建

- 安装依赖：
  - `npm install`
- 本地开发：
  - `npm run dev`
  - 默认端口为 `80`，启动后会自动打开浏览器（可在 `vite.config.js` 的 `server.port` 修改）
- 生产构建：
  - `npm run build`
- 本地预览构建产物：
  - `npm run preview`
- 代码检查与格式化：
  - `npm run lint`
  - `npm run format`

## 路由与示例页面

项目路由位于 `src/router/index.js`，当前包含以下页面：

- `/` Home（主页）
- `/about` About（关于）
- `/tag` LabelTag（标签示例）
- `/ske` SkeDelay（骨架屏与延迟示例）
- `/form` FormView（表单示例）
- `/rec` RecEdit（记录编辑示例）
- `/st` SliderToggle（滑块与开关示例）
- `/av` AlertView（消息提示/警告示例）
- `/tb` TableView（表格示例）
- `/mv` MenuView（菜单示例）
- `/lv` LayoutView（布局示例）
- `/sm` StudentMgr（学生管理示例）

## 目录结构（关键位置）

- `src/main.js`：应用入口，注册 Pinia、Router，并全局注册 Element Plus 图标组件。
- `src/App.vue`：顶层组件，仅渲染 `RouterView`。
- `src/views/`：各示例页面（见上方路由列表）。
- `src/assets/main.css`：全局样式入口，包含 Tailwind 引入（`@tailwind base/components/utilities`）。
- `tailwind.config.js`：Tailwind 配置，扫描 `index.html` 与 `src/**/*.{vue,js,ts,jsx,tsx}`。
- `vite.config.js`：Vite 配置，包含别名 `@ -> src`、自动导入与组件解析、图标与 Inspect 插件，以及 `server` 端口配置。

## 使用说明与提示

- 访问地址：
  - 开发环境通常为 `http://localhost/`（端口为 `80` 时无需加端口号）。
- 如果 `80` 端口被占用或遇到权限问题：
  - 请修改 `vite.config.js` 中的 `server.port`，例如设为 `3000`，则访问 `http://localhost:3000/`。
- 图标与自动导入：
  - 已启用 `unplugin-auto-import` 与 `unplugin-vue-components`，自动导入 Vue/Element Plus 相关函数与组件。
  - 图标组件使用 `unplugin-icons`，并开启 `Element Plus` 图标集合，示例中在入口处已注册所有图标组件。

## 推荐 IDE 设置

- 建议使用 `VSCode` 与 `Volar` 插件（并关闭旧的 `Vetur`）。