# 软著前端

**Repository Path**: zjl_gitees/patent-application-fe

## Basic Information

- **Project Name**: 软著前端
- **Description**: 软著前端软著前端软著前端软著前端软著前端软著前端
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-11
- **Last Updated**: 2026-05-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 专利申请管理系统前端

基于 Vue3 + Vite + Element Plus + TypeScript 构建的现代化前端应用。

## 📋 项目简介

专利申请管理系统前端，提供专利申请、管理、查询等功能。

## 🛠️ 技术栈

| 框架 | 说明 | 版本 |
|------|------|------|
| [Vue](https://staging-cn.vuejs.org/) | Vue 框架 | 3.5.12 |
| [Vite](https://cn.vitejs.dev/) | 开发与构建工具 | 5.1.4 |
| [Element Plus](https://element-plus.org/zh-CN/) | UI 组件库 | 2.9.1 |
| [TypeScript](https://www.typescriptlang.org/docs/) | JavaScript 的超集 | 5.3.3 |
| [Pinia](https://pinia.vuejs.org/) | Vue 状态管理库 | 2.1.7 |
| [Vue Router](https://router.vuejs.org/) | Vue 路由 | 4.4.5 |
| [UnoCSS](https://uno.antfu.me/) | 原子化 CSS 引擎 | 0.58.5 |

## 📦 环境要求

- **Node.js**: >= 16.0.0
- **pnpm**: >= 8.6.0

## 🚀 快速开始

### 1. 安装依赖

```bash
pnpm install
# 或使用简写
pnpm i
```

### 2. 配置环境变量

在项目根目录创建环境配置文件 `.env.local`（本地开发环境）或 `.env.dev`（开发服务器环境）。

环境变量配置示例：

```env
# 应用标题
VITE_APP_TITLE=专利申请管理系统

# 开发服务器配置
VITE_PORT=3000
VITE_OPEN=true

# API 配置
VITE_BASE_URL=http://localhost:8080
VITE_API_URL=/admin-api

# 基础路径
VITE_BASE_PATH=/

# 构建配置
VITE_DROP_DEBUGGER=false
VITE_DROP_CONSOLE=false
VITE_SOURCEMAP=true
VITE_OUT_DIR=dist
```

### 3. 启动开发服务器

```bash
# 启动本地开发环境（使用 env.local 模式）
pnpm dev

# 启动开发服务器环境（使用 dev 模式）
pnpm dev-server
```

启动成功后，访问 `http://localhost:3000`（端口号根据环境配置而定）。

## 📜 可用脚本

| 命令 | 说明 |
|------|------|
| `pnpm i` | 安装依赖 |
| `pnpm dev` | 启动本地开发环境（env.local 模式） |
| `pnpm dev-server` | 启动开发服务器环境（dev 模式） |
| `pnpm build:local` | 构建本地环境 |
| `pnpm build:dev` | 构建开发环境 |
| `pnpm build:test` | 构建测试环境 |
| `pnpm build:stage` | 构建预发布环境 |
| `pnpm build:prod` | 构建生产环境 |
| `pnpm preview` | 预览构建结果 |
| `pnpm ts:check` | TypeScript 类型检查 |
| `pnpm lint:eslint` | ESLint 代码检查 |
| `pnpm lint:format` | Prettier 代码格式化 |
| `pnpm lint:style` | Stylelint 样式检查 |
| `pnpm clean` | 清理 node_modules |
| `pnpm clean:cache` | 清理构建缓存 |

## 📁 项目结构

```
patent-application-fe/
├── build/              # 构建配置
├── public/             # 静态资源
├── src/                # 源代码
│   ├── api/           # API 接口
│   ├── assets/        # 资源文件
│   ├── components/    # 公共组件
│   ├── config/        # 配置文件
│   ├── hooks/         # 组合式函数
│   ├── layouts/       # 布局组件
│   ├── locales/       # 国际化
│   ├── router/        # 路由配置
│   ├── stores/        # 状态管理
│   ├── styles/        # 样式文件
│   ├── utils/         # 工具函数
│   └── views/         # 页面组件
├── types/             # TypeScript 类型定义
├── index.html         # HTML 模板
├── package.json       # 项目配置
├── tsconfig.json      # TypeScript 配置
├── vite.config.ts     # Vite 配置
└── uno.config.ts      # UnoCSS 配置
```

## 🔧 开发工具推荐

推荐使用 VS Code 开发，配合以下插件：

| 插件名 | 功能 |
|-------|------|
| Vue - Official | Vue 与 TypeScript 支持 |
| UnoCSS | UnoCSS 语法支持 |
| Iconify IntelliSense | Iconify 图标预览和搜索 |
| i18n Ally | 国际化智能提示 |
| ESLint | 代码检查 |
| Prettier | 代码格式化 |
| Stylelint | CSS 格式化 |

## 📝 开发规范

- 使用 TypeScript 进行开发
- 遵循 ESLint 和 Prettier 代码规范
- 组件使用组合式 API（Composition API）
- 使用 Pinia 进行状态管理
- 使用 Vue Router 进行路由管理

## 🐛 常见问题

### 1. 依赖安装失败

如果使用 `npm` 或 `yarn` 安装失败，请使用 `pnpm`：

```bash
npm install -g pnpm
pnpm install
```

### 2. 端口被占用

修改 `.env.local` 文件中的 `VITE_PORT` 配置，或关闭占用端口的进程。

### 3. 环境变量不生效

确保环境配置文件在项目根目录，且文件名正确（如 `.env.local`）。

## 📄 许可证

MIT License

## 👥 贡献

欢迎提交 Issue 和 Pull Request！