FFPlayout 前端项目启动与配置教程

1. 项目目录结构及介绍

FFPlayout 前端项目是一个基于 Vue.js 的 Web 应用程序，用于管理和控制 FFPlayout 流媒体引擎。以下是项目的目录结构及其简要介绍：

ffplayout-frontend/
├── .github/                # GitHub 工作流和模板文件
├── .vscode/               # VSCode 项目配置文件
├── assets/                # 静态资源文件，如图片、样式表等
├── components/            # Vue 组件目录
├── composables/           # 可复用的 Vue 组合函数
├── docs/                  # 项目文档
├── i18n/                  # 国际化资源文件
├── layouts/               # 页面布局组件
├── middleware/            # 中间件目录
├── pages/                 # Vue 页面组件
├── plugins/               # Vue 插件目录
├── public/                # 公共文件，如 HTML 文件
├── stores/                # Vuex 状态管理
├── types/                 # TypeScript 类型定义
├── .gitignore             # Git 忽略文件
├── LICENSE                # 项目许可证文件
├── README.md              # 项目说明文件
├── app.vue                # 根 Vue 实例
├── error.vue              # 错误页面组件
├── eslint.config.mjs      # ESLint 配置文件
├── nuxt.config.ts         # Nuxt.js 配置文件
├── package-lock.json      # 包版本锁定文件
├── package.json           # 项目包文件
├── tailwind.config.ts     # Tailwind CSS 配置文件
└── tsconfig.json          # TypeScript 配置文件

2. 项目的启动文件介绍

项目的启动主要通过 package.json 文件中定义的脚本来完成。以下是主要的启动脚本：

• npm run dev: 启动开发服务器，通常用于本地开发。
• npm run build: 构建生产环境的静态文件。
• npm run start: 启动生产环境的服务器。

在开发模式下，你可以通过访问 http://localhost:3000 来查看项目。

3. 项目的配置文件介绍

项目的配置主要通过以下几个文件来完成：

• nuxt.config.ts: Nuxt.js 的配置文件，用于定义项目的路由、插件、中间件等。
• tailwind.config.ts: Tailwind CSS 的配置文件，用于自定义样式。
• eslint.config.mjs: ESLint 的配置文件，用于定义代码质量规则。
• tsconfig.json: TypeScript 的配置文件，用于定义 TypeScript 编译选项。

确保在开始开发前，根据项目需求和个人喜好调整这些配置文件。