# chapter-11
**Repository Path**: henryong/chapter-11
## Basic Information
- **Project Name**: chapter-11
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: 6-lesson-lab
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-07
- **Last Updated**: 2025-12-10
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# **第1课动手实验：管理系统基础框架搭建（60分钟）**
## **实验目标**
完成一个具备完整布局、菜单导航和基础表单的管理系统骨架
---
## **第一部分：环境准备与项目初始化（15分钟）**
### **步骤1：创建项目（3分钟）**
**bash**
```
# 使用Vite快速创建Vue项目（已提前准备好模板）
npm create vue@latest element-lab -- --template vue-ts
cd element-lab
npm install
```
### **步骤2：安装Element Plus（2分钟）**
**bash**
```
# 完整引入方式（适合教学）
npm install element-plus @element-plus/icons-vue
```
### **步骤3：基础配置（5分钟）**
**修改 `src/main.ts`：**
**typescript**
```
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)
// 注册所有图标（简化教学）
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(ElementPlus)
app.mount('#app')
```
**清理 `src/App.vue`：**
**vue**
```
```
### **步骤4：创建实验文件结构（5分钟）**
**text**
```
src/
├── views/
│ ├── Layout.vue # 主布局组件
│ ├── Login.vue # 登录页面
│ └── Dashboard.vue # 仪表盘页面
├── components/
│ └── Sidebar.vue # 侧边栏组件
└── router/
└── index.ts # 路由配置
```
**快速创建命令：**
**bash**
```
mkdir -p src/views src/components src/router
touch src/views/Layout.vue src/views/Login.vue src/views/Dashboard.vue
touch src/components/Sidebar.vue src/router/index.ts
```
---
## **第二部分：管理系统骨架搭建（20分钟）**
### **任务1：创建主布局组件（10分钟）**
**文件：`src/views/Layout.vue`**
**vue**
```
首页
仪表盘
```
### **任务2：创建侧边栏组件（10分钟）**
**文件：`src/components/Sidebar.vue`**
**vue**
```
```
---
## **第三部分：表单组件实践（25分钟）**
### **任务3：创建登录页面（15分钟）**
**文件：`src/views/Login.vue`**
**vue**
```
记住密码
登录
```
### **任务4：创建仪表盘页面（10分钟）**
**文件：`src/views/Dashboard.vue`**
**vue**
```
{{ stat.value }}
{{ stat.label }}
快速操作
{{ action.text }}
```
---
## **第四部分：整合与测试（5分钟）**
### **任务5：整合所有组件**
**修改 `src/App.vue`：**
**vue**
```
```
### **启动开发服务器：**
**bash**
```
npm run dev
```
---
## **课堂实验检查清单**
学生应在60分钟内完成：
* ✅ 项目环境搭建与配置
* ✅ 主布局容器（Header + Sidebar + Main）
* ✅ 响应式侧边栏菜单
* ✅ 登录表单（带验证规则）
* ✅ 仪表盘统计卡片
* ✅ 整体样式美化
### **常见问题解决方案**
1. **图标不显示** ：检查是否安装了 `@element-plus/icons-vue`
2. **样式丢失** ：确认 `main.ts` 中引入了样式文件
3. **布局错乱** ：检查 `height: 100vh` 设置
4. **表单验证不生效** ：确认 `rules` 配置正确
### **扩展挑战（课后可选）**
1. 实现侧边栏的折叠/展开功能
2. 为登录表单添加验证码功能
3. 实现响应式适配：手机端隐藏侧边栏
4. 添加暗黑模式切换按钮
---
## **实验成果展示**
**预期效果截图描述：**
1. 登录页面：居中卡片表单，带验证功能
2. 主布局：顶部深色导航栏 + 左侧菜单 + 右侧内容区
3. 响应式：调整浏览器宽度，查看布局变化
4. 交互体验：点击菜单项有反馈，表单验证有提示
**技术要点总结：**
* 掌握了 Container 布局系统的使用
* 学会了 Form 组件的验证配置
* 理解了响应式栅格的设计原理
* 实践了组件化开发的基本流程