# 小说前端PC项目

基于 Vue 3 + Element Plus + Pinia + Vue Router + SCSS 的小说网站前端项目。

## 技术栈

- Vue 3 - 渐进式JavaScript框架
- Element Plus - 基于Vue 3的组件库
- Pinia - Vue的状态管理库
- Vue Router - Vue官方路由管理器
- SCSS - CSS预处理器

## 项目结构

```
novel-front-pc/
├── public/             # 静态资源
├── src/
│   ├── api/            # API请求
│   ├── assets/         # 资源文件(图片、样式等)
│   │   └── styles/     # 样式文件
│   ├── components/     # 组件
│   │   ├── common/     # 通用组件
│   │   └── layout/     # 布局组件
│   ├── router/         # 路由配置
│   ├── store/          # Pinia状态管理
│   ├── utils/          # 工具函数
│   ├── views/          # 页面视图
│   ├── App.vue         # 根组件
│   └── main.js         # 入口文件
├── .gitignore          # Git忽略文件
├── index.html          # HTML模板
├── package.json        # 项目依赖
├── README.md           # 项目说明
└── vite.config.js      # Vite配置
```

## 开发指南

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run serve
```

## 开发规范

- 组件名使用 PascalCase 命名法
- 文件夹和文件名使用 kebab-case 命名法
- 使用 SCSS 编写样式
- 组件样式使用 scoped 属性限定作用域
- 使用 Pinia 进行状态管理
- 使用 Vue Router 进行路由管理

## 组件复用

在编写代码前，请先查看项目目录结构，确认是否有可复用的组件。如果没有可复用的组件，请按照模块进行拆分，使代码可以被复用。