# vibecoding

**Repository Path**: dengxiaogui/vibecoding

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-11
- **Last Updated**: 2026-03-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 2.6 应用框架(AI 编程测试项目)

基于 Vue 2.6 的现代化前端应用框架，集成了路由、状态管理、API 服务层等核心功能。

## 技术栈

- Vue 2.6
- Vue Router 3.x
- Vuex 3.x
- Axios
- Vue CLI 5.x

## 项目结构

```
vue2.6_test/
├── public/                 # 静态资源
│   └── index.html         # HTML 模板
├── src/
│   ├── api/               # API 服务层
│   │   ├── index.js       # API 统一导出
│   │   ├── auth.js        # 认证相关 API
│   │   ├── request.js     # Axios 封装
│   │   └── user.js        # 用户相关 API
│   ├── assets/            # 资源文件
│   │   └── styles/        # 全局样式
│   ├── components/        # 组件
│   │   ├── common/        # 通用组件
│   │   └── business/      # 业务组件
│   │       └── LoginForm.vue  # 登录表单组件
│   ├── directives/        # 自定义指令
│   ├── router/            # 路由配置
│   │   └── index.js       # 路由主文件
│   ├── store/             # Vuex 状态管理
│   │   ├── index.js       # Store 主文件
│   │   └── modules/       # 模块化 store
│   │       ├── app.js     # 应用模块
│   │       └── user.js    # 用户模块
│   ├── utils/             # 工具函数
│   │   └── request.js     # 请求工具
│   ├── views/             # 页面组件
│   │   ├── LoginPage.vue  # 登录页面
│   │   ├── Home.vue       # 首页
│   │   └── About.vue      # 关于页面
│   ├── App.vue            # 根组件
│   └── main.js            # 入口文件
├── .env.development       # 开发环境变量
├── .env.production        # 生产环境变量
├── .gitignore            # Git 忽略文件
├── package.json          # 项目配置
└── vue.config.js         # Vue CLI 配置
```

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run serve
```

访问 http://localhost:8080

### 生产构建

```bash
npm run build
```

### 代码检查

```bash
npm run lint
```

## 核心功能

### 1. Tailwind CSS 集成

项目已集成 Tailwind CSS v3.x，提供原子化 CSS 类和设计系统，支持：

- 原子化工具类，快速构建 UI
- JIT 模式，按需生成 CSS，优化包体积
- 自定义主题配置
- 响应式设计类
- 与现有 CSS 共存

**Tailwind 配置文件**：

- `tailwind.config.js` - Tailwind 主题和内容路径配置
- `postcss.config.js` - PostCSS 插件配置
- `src/assets/styles/tailwind.css` - Tailwind 指令入口

**使用示例**：

```html
<div class="flex items-center justify-center bg-gray-100">
  <div class="bg-white p-8 rounded-lg shadow-lg">
    <h1 class="text-3xl font-bold text-primary-600">标题</h1>
    <button class="px-6 py-2 bg-primary-600 text-white rounded hover:bg-primary-700">按钮</button>
  </div>
</div>
```

**测试页面**：

- 访问 `/tailwind-test` 查看 Tailwind 集成效果

### 2. 用户认证

提供完整的用户登录功能，支持：

- 用户登录和登出
- Token 管理（使用 localStorage）
- 路由级别的权限控制
- 表单验证
- 错误提示

**测试账号**：

- 管理员：admin / 123456
- 普通用户：user / 123456

**API 说明**：

- `authApi.login(data)` - 用户登录
- `authApi.logout()` - 用户登出
- `authApi.getUserInfo()` - 获取用户信息

### 3. 路由管理

使用 Vue Router 3.x 进行路由管理，支持：

- 动态路由
- 路由守卫
- 路由元信息

### 4. 状态管理

使用 Vuex 3.x 进行状态管理，支持：

- 模块化 store
- 状态持久化
- 状态管理工具

### 5. API 服务层

统一的 API 请求封装，支持：

- 请求/响应拦截器
- 错误处理
- Token 管理
- 请求取消

### 6. 工具函数

提供常用的工具函数：

- 日期格式化
- 防抖节流
- 深拷贝
- URL 参数处理
- 表单验证

## 开发规范

### 命名规范

- **组件文件**：PascalCase（如 `UserProfile.vue`）
- **工具文件**：camelCase（如 `dateFormatter.js`）
- **常量文件**：UPPER_SNAKE_CASE（如 `API_ENDPOINTS.js`）

### 组件开发

- 保持组件单一职责
- 组件代码控制在 300 行以内
- 使用 props 和 events 进行父子组件通信
- 避免在 computed 中产生副作用

### 代码风格

- 使用 ESLint 进行代码检查
- 遵循 Vue 官方风格指南
- 保持代码简洁和可读性

## 环境变量

### 开发环境 (.env.development)

```bash
NODE_ENV=development
VUE_APP_BASE_API=/api
VUE_APP_TITLE=Vue 2.6 应用框架
```

### 生产环境 (.env.production)

```bash
NODE_ENV=production
VUE_APP_BASE_API=/api
VUE_APP_TITLE=Vue 2.6 应用框架
```

## 浏览器支持

- Chrome (最新版本)
- Firefox (最新版本)
- Safari (最新版本)
- Edge (最新版本)

## 许可证

MIT