# wl2023_webapp-open

**Repository Path**: wlvip/wl2023_webapp-open

## Basic Information

- **Project Name**: wl2023_webapp-open
- **Description**: wl2023_webapp-open开源版前端博客
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-09-02
- **Last Updated**: 2024-09-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Axios, Element-UI

## README

# wl2023_webapp 前端项目

这是 `wl2023` 个人博客系统的前端部分，使用现代前端技术栈构建，旨在提供用户友好的界面和流畅的用户体验。

后端仓库地址: https://gitee.com/wlvip/wl2023-open
## 项目概述

`wl2023_webapp` 是一个基于 Vue 3 的单页应用程序，具有优雅的用户界面和丰富的交互功能。项目涵盖了文章展示、用户交互、媒体播放等功能，并集成了多种第三方库和工具以提升开发效率和用户体验。

## 技术栈

- **Vue 3**: 使用最新的 Vue 框架构建，提供高效的组件化开发模式。
- **Element Plus**: 基于 Element UI 的 Vue 3 版本，提供了一套现代化的 UI 组件库。
- **Pinia**: 作为应用状态管理库，替代 Vuex，简化了全局状态的管理和维护。
- **Vite**: 现代前端构建工具，支持快速开发和热更新，提升开发效率。
- **TypeScript**: 使用 TypeScript 进行静态类型检查，提升代码的可维护性和安全性。
- **Sass**: 使用 Sass 进行样式编写，提供更灵活的样式管理能力。
- **Axios**: HTTP 客户端，用于与后端 API 进行数据交互。
- **PrismJS**: 代码高亮库，用于文章内代码的解析与展示。
- **Animate.css & Wow.js**: 提供丰富的 CSS 动画效果，提升用户的视觉体验。
- **Vue Router**: 路由管理库，用于实现单页应用中的页面导航。
- **Danmaku**: 弹幕留言功能，增强用户互动体验。
- **Custom Music Player**: 自定义音乐播放器，支持本地音乐的播放和控制。
- **Token-Based Authentication**: 通过本地存储 token 实现“记住我”功能，提升用户体验。

## 功能特性

- **美观的界面**: 使用 Element Plus 和自定义样式，打造简洁而美观的用户界面。
- **丝滑的动画效果**: 通过 Animate.css 和 Wow.js，实现多样的页面动画效果，提升用户体验。
- **弹幕留言**: 实现了弹幕式留言功能，让用户可以更直观地参与互动。
- **自定义音乐播放器**: 设计并实现了一个自定义的音乐播放器，支持本地音乐的播放。
- **记住我功能**: 通过本地 token 存储，实现用户的“记住我”功能，无需每次重新登录。
- **文章展示与交互**: 支持文章内容的分类展示、视频播放、代码高亮等功能，提升内容的可读性和交互性。

## 项目预览
### 前端预览
![图片描述](https://gitee.com/wlvip/wl2023-admin/raw/master/db/1.png)
![图片描述](https://gitee.com/wlvip/wl2023-admin/raw/master/db/2.png)
![图片描述](https://gitee.com/wlvip/wl2023-admin/raw/master/db/3.png)
![图片描述](https://gitee.com/wlvip/wl2023-admin/raw/master/db/4.png)
![图片描述](https://gitee.com/wlvip/wl2023-admin/raw/master/db/5.png)
![图片描述](https://gitee.com/wlvip/wl2023-admin/raw/master/db/6.png)
![图片描述](https://gitee.com/wlvip/wl2023-admin/raw/master/db/7.png)
![图片描述](https://gitee.com/wlvip/wl2023-admin/raw/master/db/8.png)
### 后端预览
![图片描述](https://gitee.com/wlvip/wl2023-admin/raw/master/db/11.png)
![图片描述](https://gitee.com/wlvip/wl2023-admin/raw/master/db/12.png)
![图片描述](https://gitee.com/wlvip/wl2023-admin/raw/master/db/13.png)



## 快速开始

### 环境要求

- Node.js 20.x
- npm 10.x

### 安装与运行

1. 克隆仓库：
   ```bash
   git clone https://gitee.com/wlvip/wl2023_webapp-open.git
   ```
2. 进入项目目录并安装依赖：
   ```bash
   cd wl2023_webapp
   npm install
   ```
3. 运行开发服务器：
   ```bash
   npm run dev
   ```

4. 构建项目：
   ```bash
   npm run build
   ```

5. 预览构建结果：
   ```bash
   npm run preview
   ```

### 项目结构

- `src/`: 包含所有的 Vue 组件、路由和状态管理。
- `public/`: 公共资源目录，包含静态文件和图标。
- `src/assets/`: 样式和图片资源文件夹。
- `src/components/`: 项目中使用的 Vue 组件。
- `src/store/`: 使用 Pinia 进行状态管理的模块。

## 贡献指南

欢迎贡献代码和功能！请先 fork 本仓库，然后提交 PR。

## 许可证

该项目基于 MIT 许可证开源。