# video.js-app

**Repository Path**: gsschen/video.js-app

## Basic Information

- **Project Name**: video.js-app
- **Description**: 使用video.js + vue3的简单示例
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 3
- **Created**: 2022-11-27
- **Last Updated**: 2025-09-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 初始化项目

- 1. 初始化项目

```bash
# 初始化
pnpm create vite video.js-app --template vue-ts
# 进入项目根目录
cd video.js-app
# 安装依赖
pnpm i
```

- 2. eslint

```bash
# 安装eslint
pnpm add eslint -D
# 初始化eslint
npx eslint --init
# 手动安装依赖
pnpm add eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest -D
```

- 3. prettier

```bash
pnpm add prettier -D
```

- 4. package.json

```
"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix",
"format": "prettier --write ./**/*.{vue,ts,tsx,js,jsx,css,less,scss,json}"
```

- 5. 解决 eslint 和 prettier 冲突问题

```bash
  pnpm add eslint-config-prettier eslint-plugin-prettier -D
```

在 .eslintrc.cjs 中 extends 的最后添加一个配置:

```
extends: [
  'eslint:recommended',
  'plugin:vue/vue3-recommended',
  'plugin:@typescript-eslint/recommended',
  'plugin:prettier/recommended'
]
```

- 6. vscode 中设置自动保存格式化,在 .vscode/settings.json 文件中添加如下规则。

```json
{
  "editor.formatOnSave": true, // 开启自动保存
  "editor.defaultFormatter": "esbenp.prettier-vscode" // 默认格式化工具选择prettier
}
```

- 7. 安装 sass

```
pnpm i sass -D
```

### video.js

```bash
pnpm i video.js
pnpm i @types/video.js -D
```

### svgs

https://blog.csdn.net/weixin_53731501/article/details/125478380

```bash
pnpm i vite-plugin-svg-icons -D
```