# shorthand-vue

**Repository Path**: practical-code/shorthand-vue

## Basic Information

- **Project Name**: shorthand-vue
- **Description**: shorthand 单词项目 vue
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-24
- **Last Updated**: 2026-03-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# Shorthand Vue

一个基于 Vue 3 + Vite 构建的在线学习平台，提供 Web 端和移动端支持。

## 项目简介

Shorthand Vue 是一个教育类 Web 应用，旨在为用户提供优质的在线学习体验。项目采用前后端分离架构，支持多种学习功能，包括课程浏览、练习模式、背记训练、订单管理等。

## 技术栈

- **前端框架**: Vue 3
- **构建工具**: Vite
- **状态管理**: Pinia
- **路由**: Vue Router
- **UI 组件**: 自定义组件 + 公共组件
- **HTTP 客户端**: Axios
- **部署**: Docker + Nginx

## 项目结构

```
shorthand-vue/
├── src/
│   ├── api/                 # API 接口层
│   │   ├── base.js
│   │   ├── courses.js       # 课程相关接口
│   │   ├── login.js         # 登录接口
│   │   ├── order.js         # 订单接口
│   │   ├── question.js      # 问答接口
│   │   └── user.js          # 用户接口
│   ├── assets/              # 静态资源
│   ├── directive/           # Vue 指令
│   ├── layout/              # 布局组件
│   ├── plugins/             # 插件配置
│   ├── router/              # 路由配置
│   ├── store/                # 状态管理
│   ├── utils/                # 工具函数
│   ├── views/                # 页面视图
│   │   ├── components/      # 业务组件
│   │   │   ├── mobile/      # 移动端页面
│   │   │   └── web/         # Web 端页面
│   │   ├── error/           # 错误页面
│   │   └── system/          # 系统功能页面
│   ├── App.vue
│   └── main.js
├── vite/                    # Vite 配置
├── public/                  # 公共静态资源
├── docker-compose.yml       # Docker Compose 配置
├── Dockerfile               # Docker 镜像配置
└── deploy.sh                # 部署脚本
```

## 功能特性

- **用户系统**: 登录、注册、密码找回、个人信息管理
- **课程学习**: 课程浏览、课程详情、课程购买
- **练习模式**: 多种学习练习方式
- **背记训练**: 记忆强化训练功能
- **订单管理**: 购买记录、订单查询
- **移动端适配**: 响应式设计，支持移动端访问

## 快速开始

### 环境要求

- Node.js 18+
- pnpm 8+

### 安装依赖

```bash
pnpm install
```

### 开发模式

```bash
pnpm dev
```

### 构建生产版本

```bash
pnpm build
```

### Docker 部署

```bash
# 构建镜像
docker-compose -f docker-compose.yml build

# 启动服务
docker-compose -f docker-compose.yml up -d
```

## 环境变量

项目支持多环境配置：

- `.env` - 默认配置
- `.env.development` - 开发环境
- `.env.staging` - 预发布环境
- `.env.production` - 生产环境

配置说明：

- `API_URL` - 后端 API 地址

## 目录说明

### src/api

封装了与后端交互的接口，包括用户、课程、订单、问答等模块。

### src/views/components

- `mobile/` - 移动端页面组件
- `web/` - PC 端页面组件

### src/utils

工具函数集合，包括：

- `auth.js` - 认证相关工具
- `request.js` - HTTP 请求封装
- `jsencrypt.js` - RSA 加密工具
- `jwt.js` - JWT 令牌解析
- `device.js` - 设备检测

### src/directive

自定义 Vue 指令，如复制文本等。

## 部署说明

### Docker 部署

项目包含 Dockerfile 和 docker-compose.yml，支持一键部署：

1. 构建镜像并启动容器
2. Nginx 作为反向代理和静态文件服务
3. 环境变量通过模板动态注入

### 手动部署

1. 执行 `pnpm build` 构建项目
2. 将 `dist` 目录下的文件部署到 Nginx 或其他 Web 服务器