# vue3-demo

**Repository Path**: back-stage-management_3/vue3-demo

## Basic Information

- **Project Name**: vue3-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-19
- **Last Updated**: 2025-08-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 Demo 项目

这是一个使用 Vite + Vue3 创建的演示项目，实现了左侧栏目列表和右侧内容展示的页面布局。

## 项目特性

- ⚡ **Vite** - 快速的构建工具和开发服务器
- 🔧 **Vue3** - 使用 Composition API 的现代化 Vue 应用
- 📱 **响应式布局** - 支持桌面和移动设备的自适应布局
- 🎨 **现代化界面** - 美观的侧边栏导航和内容展示区域

## 页面布局

### 左侧栏目列表
- **导航菜单**：包含5个主要功能模块
  - 🏠 首页
  - 👥 用户管理
  - 📦 产品列表
  - 📋 订单管理
  - ⚙️ 设置

### 右侧内容区域
- **动态标题**：根据左侧选择的栏目显示对应标题
- **欢迎内容**：展示项目特性和使用说明
- **响应式布局**：适配不同屏幕尺寸

## 快速开始

### 安装依赖
```bash
npm install
```

### 启动开发服务器
```bash
npm run dev
```

### 构建生产版本
```bash
npm run build
```

### 预览构建结果
```bash
npm run preview
```

## 技术栈

- **前端框架**: Vue 3.4.x
- **构建工具**: Vite 5.x
- **路由管理**: Vue Router 4.x
- **状态管理**: Pinia 2.x
- **样式**: CSS3 + Flexbox
- **语言**: TypeScript

## 开发环境要求

- Node.js >= 18.0.0
- npm 或 yarn

## 项目结构

```
vue3-demo/
├── src/
│   ├── App.vue          # 主应用组件（包含左侧栏目和右侧内容）
│   ├── main.ts          # 应用入口文件
│   ├── router/          # Vue Router 路由配置
│   └── stores/          # Pinia 状态管理
├── public/              # 静态资源
├── index.html           # HTML 入口文件
└── package.json         # 项目依赖配置
```