# particle-frontend

**Repository Path**: xiangrui2/particle-frontend

## Basic Information

- **Project Name**: particle-frontend
- **Description**: 1312312313131
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-28
- **Last Updated**: 2026-01-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Stone 项目使用说明

## 项目简介

本项目是一个基于 Vue 3 + TypeScript + Vite 构建的前端应用，使用 Element Plus 作为 UI 组件库。

## 快速开始
1. 确保安装了 Node.js 18+
2. 运行 npm install
3. 运行 npm run dev
4. 访问 http://localhost:8081

如果遇到问题，再向下阅读。

## 环境要求

在开始之前，请确保你的开发环境满足以下要求：

- **Node.js**: 版本 >= 18.0.0
- **npm**: 版本 >= 9.0.0（随 Node.js 一起安装）
- **包管理器**: npm 或 pnpm

### 检查版本

```bash
node -v
npm -v
```

## 安装步骤

### 1. 获取项目代码

将项目代码复制到你的本地目录。

### 2. 安装依赖

在项目根目录下执行：

```bash
npm install
```

## 项目依赖版本

### 核心依赖

| 包名 | 版本 | 说明 |
|------|------|------|
| vue | ^3.5.13 | Vue 3 核心框架 |
| vue-router | ^4.5.1 | 路由管理 |
| element-plus | ^2.10.2 | UI 组件库 |
| @element-plus/icons-vue | ^2.3.1 | Element Plus 图标 |
| axios | ^1.10.0 | HTTP 请求库 |
| mitt | ^3.0.1 | 事件总线 |

### 开发依赖

| 包名 | 版本 | 说明 |
|------|------|------|
| vite | ^6.3.5 | 构建工具 |
| typescript | ~5.8.3 | TypeScript 支持 |
| vue-tsc | ^2.2.8 | Vue TypeScript 编译器 |
| @vitejs/plugin-vue | ^5.2.3 | Vue 3 插件 |
| @types/node | ^24.1.0 | Node.js 类型定义 |

## 配置说明

### 环境变量配置

项目根目录下有 `.env` 文件，用于配置 API 地址：

```env
VITE_API_BASE=http://localhost:5000
```

根据实际后端服务地址修改 `VITE_API_BASE` 的值。

### 开发服务器配置

开发服务器默认配置（在 `vite.config.ts` 中）：

- **端口**: 8081
- **主机**: localhost

如需修改，请编辑 `vite.config.ts` 文件。

## 启动项目

### 开发模式

启动开发服务器，支持热更新：

```bash
npm run dev
```

启动后，在浏览器中访问：`http://localhost:8081`

### 构建生产版本

打包项目，生成生产环境代码：

```bash
npm run build
```

构建产物会输出到 `dist` 目录。

### 预览生产版本

本地预览构建后的项目：

```bash
npm run preview
```

## 项目结构

```
stone/
├── public/          # 静态资源
├── src/
│   ├── assets/      # 资源文件（图片、样式等）
│   ├── components/  # 公共组件
│   ├── router/      # 路由配置
│   ├── utils/       # 工具函数
│   ├── style/       # 全局样式
│   ├── App.vue      # 根组件
│   └── main.ts      # 入口文件
├── .env             # 环境变量配置
├── index.html       # HTML 模板
├── vite.config.ts   # Vite 配置
├── tsconfig.json    # TypeScript 配置
└── package.json     # 项目配置
```

## 常见问题

### 安装依赖失败

如果 `npm install` 失败，尝试以下方法：

1. 清除 npm 缓存：
   ```bash
   npm cache clean --force
   ```

2. 删除 `node_modules` 和 `package-lock.json`，重新安装：
   ```bash
   rm -rf node_modules package-lock.json
   npm install
   ```

### 端口被占用

如果 8081 端口被占用，可以修改 `vite.config.ts` 中的端口号，或使用以下命令指定端口：

```bash
npm run dev -- --port 3000
```

### TypeScript 类型错误

如果遇到类型错误，尝试重新生成类型：

```bash
npm run build
```