# 11video_frontend

**Repository Path**: icefox2023/11video_frontend

## Basic Information

- **Project Name**: 11video_frontend
- **Description**: 11video前端
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-22
- **Last Updated**: 2024-10-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Electron, TypeScript, HTML

## README

# 11video_frontend

## 推荐的IDE和插件

### 推荐IDE

- `VSCode`

### 推荐插件

- `Vue-official`  vscode官方的vue插件
- `TailwindCSS Intellisense`  TailwindCSS的智能提示插件
- `Prettier`  代码格式化插件

### 开发环境

- `Node.js ^20.11.0`  运行JavaScript的运行环境。
- `npm ^10.2.4`  包管理工具。
- `cnpm ^9.4.0`  包管理工具。
- `Vue ^3.4.21`  开发框架
- `Electron ^30.0.0`  构建桌面应用。
- `Typescript ^5.4.0`  构建JavaScript语言。

### 构建环境

- `Vite ^5.2.8`  构建工具。
- `Electron Builder ^24.13.3`  打包桌面应用。

### 运行环境

- 硬件要求：
  - 处理器：Intel Core i5 8250U 或 AMD Ryzen 5 3500U
  - 内存：4GB以上
  - 存储：256GB 或 512GB
- 操作系统：Windows 10 及以上版本
- 网络要求：
  - 下载速度：10Mbps以上
  - 上传速度：10Mbps以上

### 项目技术栈

- `Vue`  构建用户界面。
- `Vue Router`  管理路由。
- `Pinia`  管理状态。
- `ElementPlus`  构建组件库。
- `Axios`  发送HTTP请求。
- `Electron`  构建桌面应用。
- `Typescript` 构建JavaScript语言。
- `Vite`  构建应用。
  
### 项目介绍

本项目是一个基于`Vite`和`Electron`的视频播放器前端项目。

### 功能列表

- 用户管理
  - 用户注册
  - 用户登录
  - 用户信息修改
  - 用户信息查看
  - 用户粉丝列表
  - 用户关注列表
  - 用户上传的视频列表
  - 用户视频草稿箱列表
  - 用户视频收藏列表
- 视频管理
  - 视频上传
  - 视频信息修改
  - 视频信息查看
  - 视频删除
  - 视频点赞
  - 视频收藏
  - 视频播放量统计
  - 视频搜索
  - 视频分类
  - 视频列表
    - 综合排序
    - 最新发布
    - 最多播放
- 评论管理
  - 评论发布
  - 评论删除
  - 获取视频评论
- 消息管理
  - 私信发送
  - 私信查看
  - 视频审核消息
  - 视频点赞消息
  - 视频收藏消息
- 弹幕管理
  - 弹幕发送
  - 获取视频弹幕

### 项目结构

``` src
├── public
│   ├── favicon.ico
├── electron
│   ├── main.js
│   ├── preload.js
├── src
│   ├── assets
│   ├── components
│   ├── data
│   ├── router
│   ├── stores
│   ├── type
│   ├── utils
│   ├── views
│   ├── App.vue
│   ├── main.ts
|   ├── index.html
├── gitignore
├── env.d.ts
├── index.html
├── interface.d.ts
├── LICENSE
├── package.json
├── postcss.config.js
├── README.md
├── tailwind.config.js
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── tsconfig.vitest.json
├── vite.config.ts
├── vitest.config.ts
```

### 目录结构说明

- `public` 静态资源目录，包含`favicon.ico`文件。
- `electron`  electron主进程目录，包含`main.js`和`preload.js`文件。
- `src`  项目源码目录。
  - `assets`  静态资源目录。
  - `components`  组件目录。
  - `data`  数据目录。
  - `router`  路由目录。
  - `stores`  状态管理目录。
  - `type`  类型定义目录。
  - `utils`  工具函数目录。
  - `views`  视图目录。
  - `App.vue`  根组件。
  - `main.ts`  入口文件。
  - `index.html`  入口HTML文件。
  - `interface.d.ts`  全局接口类型定义文件。
  - `env.d.ts`  环境变量类型定义文件。
  - `LICENSE`  许可证文件。
  - `package.json`  项目配置文件。
  - `postcss.config.js`  postcss配置文件。
  - `README.md`  项目说明文件。
  - `tailwind.config.js`  tailwindcss配置文件。
  - `tsconfig.app.json`  应用TypeScript配置文件。
  - `tsconfig.json`  TypeScript配置文件。
  - `tsconfig.node.json`  Node.js环境TypeScript配置文件。
  - `tsconfig.vitest.json`  Vitest测试用例配置文件。
  - `vite.config.ts`  Vite配置文件。
  - `vitest.config.ts`  Vitest配置文件。
- `.gitignore`  git忽略文件。
- `index.html`  入口HTML文件。
- `LICENSE`  许可证文件。
- `package.json`  项目配置文件。
- `postcss.config.js`  postcss配置文件。
- `README.md`  项目说明文件。
- `tailwind.config.js`  tailwindcss配置文件。
- `tsconfig.app.json`  应用TypeScript配置文件。
- `tsconfig.json`  TypeScript配置文件。
- `tsconfig.node.json`  Node.js环境TypeScript配置文件。
- `tsconfig.vitest.json`  Vitest测试用例配置文件。
- `vite.config.ts`  Vite配置文件。
- `vitest.config.ts`  Vitest配置文件。

### 项目依赖

- `@fortawesome/fontawesome-svg-core`  用于使用Font Awesome图标。
- `@fortawesome/free-brands-svg-icons`  用于使用Font Awesome品牌图标。
- `@fortawesome/free-regular-svg-icons`  用于使用Font Awesome常规图标。
- `@fortawesome/free-solid-svg-icons`  用于使用Font Awesome实心图标。
- `@fortawesome/vue-fontawesome`  用于使用Font Awesome图标。
- `@icon-park/vue-next`  用于使用IconPark图标。
- `element-plus`  用于使用ElementPlus组件。
- `pinia`  用于状态管理。
- `vue`  用于构建用户界面。
- `vue-router`  用于路由管理。

### 开发依赖

- `@element-plus/icons-vue`  用于使用ElementPlus图标。
- `@tsconfig/node20`  用于指定Node.js环境的TypeScript配置。
- `@types/jsdom`  用于指定jsdom的类型定义。
- `@types/node`  用于指定Node.js的类型定义。
- `@vue/test-utils`  用于编写单元测试。
- `@vue/tsconfig`  用于指定Vue的TypeScript配置。
- `@vueuse/electron`  用于集成Electron。
- `autoprefixer`  用于CSS浏览器兼容性。
- `axios`  用于发送HTTP请求。
- `electron`  用于创建桌面应用。
- `electron-builder`  用于打包桌面应用。
- `electron-devtools-installer`  用于安装开发者工具。
- `jsdom`  用于模拟浏览器环境。
- `npm-run-all2`  用于运行多个npm脚本。
- `postcss`  用于CSS预处理。
- `tailwindcss`  用于CSS框架。
- `typescript`  用于JavaScript语言。
- `vite`  用于构建应用。
- `vite-plugin-electron`  用于集成Electron。
- `vite-plugin-electron-renderer`  用于集成Electron渲染进程。
- `vite-plugin-vue-devtools`  用于安装Vue开发者工具。
- `vitest`  用于编写单元测试。
- `vue-tsc`  用于替换`tsc` CLI进行类型检查。
- `xgplayer`  用于播放视频。

## Vite Configuration Reference

See [Vite Configuration Reference](https://vitejs.dev/config/).

## 项目启动

### 安装依赖

```sh
npm install
```

或者

```sh
cnpm install
```

### 启动开发环境

```sh
npm run dev
```

### 构建生产环境

```sh
npm run build
```

### 运行单元测试

```sh
npm run test:unit
```