# Think Tank

一个基于 Vue 3 + Element Plus + Vue Router 的现代化前端项目模板。

## 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **Element Plus** - 基于 Vue 3 的企业级 UI 组件库
- **Vue Router** - Vue.js 官方路由管理器
- **Vite** - 下一代前端构建工具

## 项目特性

- ✨ 使用 Vue 3 Composition API
- 🎨 集成 Element Plus UI 组件库
- 🚀 Vite 构建工具，开发体验极佳
- 📱 响应式设计，支持多种设备
- 🛣️ Vue Router 路由管理
- 🔧 自动导入配置，开发更高效

## 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

## 项目结构

```
think-tank/
├── src/
│   ├── components/          # 可复用组件
│   ├── views/              # 页面组件
│   ├── router/             # 路由配置
│   ├── App.vue             # 根组件
│   └── main.js             # 应用入口
├── package.json            # 项目配置
├── vite.config.js          # Vite 配置
└── index.html              # HTML 模板
```

## 开发指南

### 添加新页面

1. 在 `src/views/` 目录下创建新的 Vue 组件
2. 在 `src/router/index.js` 中添加路由配置
3. 在导航菜单中添加链接

### 使用 Element Plus 组件

项目已配置自动导入，可以直接使用 Element Plus 组件：

```vue
<template>
  <el-button type="primary">按钮</el-button>
  <el-input v-model="input" placeholder="请输入内容"></el-input>
</template>
```

### 图标使用

项目已全局注册 Element Plus 图标，可以直接使用：

```vue
<template>
  <el-icon><User /></el-icon>
</template>

<script setup>
import { User } from '@element-plus/icons-vue'
</script>
```

## 浏览器支持

- Chrome >= 87
- Firefox >= 78
- Safari >= 14
- Edge >= 88

## 许可证

MIT License