# FrontEndLearn

**Repository Path**: ligub/front-end-explorer

## Basic Information

- **Project Name**: FrontEndLearn
- **Description**: 前端学习
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-17
- **Last Updated**: 2025-11-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端技术教学平台

这是一个基于React和TypeScript开发的交互式前端技术教学平台，通过思维导图的形式展示前端技术体系，并提供详细的学习内容和实践环境。

## 项目功能

- **交互式思维导图**：以树状结构可视化展示前端技术体系
- **节点交互**：支持节点拖动、缩放、点击导航
- **技术点学习**：提供详细的技术文档和教程
- **工程目录学习模式**：支持代码编辑和实时效果预览
- **响应式设计**：适配不同设备屏幕尺寸

## 技术栈

- **前端框架**：React 18 + TypeScript
- **构建工具**：Vite
- **路由管理**：React Router
- **可视化库**：D3.js
- **样式方案**：CSS + 响应式设计

## 安装与运行

### 前置条件

- Node.js 18.x 或更高版本
- npm 或 yarn 包管理工具

### 安装步骤

1. 克隆项目到本地

```bash
git clone https://gitee.com/ligub/front-end-explorer.git
cd front-end-explorer
```

2. 安装依赖

```bash
npm install
```

3. 开发环境运行

```bash
npm run dev
```

4. 构建生产版本

```bash
npm run build
```

5. 预览生产版本

```bash
npm run preview
```

## 使用说明

### 思维导图功能

- **点击节点**：进入对应技术点的学习页面
- **拖动节点**：按住鼠标拖动可移动节点位置
- **缩放视图**：使用鼠标滚轮或触摸板缩放
- **重置视图**：双击空白区域重置视图到初始状态

### 学习页面功能

- **学习模式切换**：在网页学习和工程目录学习之间切换
- **代码编辑**：在工程目录学习模式下，可编辑代码并实时预览效果
- **导航返回**：点击返回按钮回到思维导图页面

## 项目结构

```
src/
├── components/      # 组件目录
│   └── MindMap/     # 思维导图组件
├── mockData/        # 模拟数据
├── pages/           # 页面组件
├── types/           # 类型定义
├── router.tsx       # 路由配置
└── main.tsx         # 入口文件
```

## 贡献指南

欢迎提交Issue和Pull Request来改进项目！

## 许可证

MIT License