# 代码演练场

**Repository Path**: 463106544/code-practice-field

## Basic Information

- **Project Name**: 代码演练场
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-09
- **Last Updated**: 2025-05-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 代码演练场（Vue 3 + Vite）

一个现代化的 Web 前端在线演练平台，支持 HTML、CSS、JavaScript 实时编辑与预览，适合学习、实验和分享代码片段。

## ✨ 项目特性

- 实时编辑和预览 HTML/CSS/JavaScript 代码
- 支持代码高亮、智能提示（基于 Monaco Editor）
- 一键全屏预览，沉浸式体验
- 支持手动/实时运行切换，防抖优化
- 响应式设计，适配多端
- 主题色美观，界面现代
- 丰富的示例和技术标签
- 动画效果流畅（基于 GSAP 实现页面和组件动效）

## 🛠 技术栈

- [Vue 3](https://vuejs.org/) + [Vite](https://vitejs.dev/)
- [Pinia](https://pinia.vuejs.org/) 状态管理
- [Monaco Editor](https://microsoft.github.io/monaco-editor/) 代码编辑器
- [GSAP](https://greensock.com/gsap/) 动画库（页面动效）
- [SCSS](https://sass-lang.com/) 现代样式

## 🚀 快速开始

1. 安装依赖：
   ```bash
   npm install
   # 或 yarn install
   ```
2. 启动开发环境：
   ```bash
   npm run dev
   # 或 yarn dev
   ```
3. 打开浏览器访问 [http://localhost:5173](http://localhost:5173)

## 📁 目录结构

```
├── public/           # 静态资源（SVG 图标等）
├── src/
│   ├── assets/       # 静态资源（图片、样式等）
│   ├── components/   # 复用组件（如 MonacoEditor）
│   ├── stores/       # Pinia 状态管理
│   ├── views/        # 页面组件（HomePage, PlaygroundPage）
│   ├── App.vue       # 根组件
│   └── main.js       # 入口文件
├── README.md         # 项目说明
└── ...
```

## 🖥 主要页面

- **首页（HomePage）**：示例列表、技术标签、导航等
- **演练场（PlaygroundPage）**：代码编辑、预览、全屏、实时/手动运行

## ⚡ 常见问题

- **代码高亮/提示无效？**
  - 请确保 Monaco Editor 的 language 属性为小写（如 'javascript'）。
- **SVG 图标不显示？**
  - 请将 html5.svg、css3.svg、javascript.svg、vue.svg 等放入 public/icons 目录。
- **实时运行太频繁？**
  - 已内置防抖，只有停止输入 600ms 后才会自动运行。

## 📢 贡献与反馈

欢迎提 issue 或 PR，或通过邮箱联系作者。

- 作者：zhangheng
- 邮箱：your@email.com

---

> 本项目基于 Vue 3 + Vite，适合前端学习、教学、分享与演示。