项目简介
StreamIT 是一个完整的视频流媒体平台模板,提供影视内容展示、电商周边商城、用户账号体系等完整功能。模板包含 Vue、React、Next.js、Nuxt.js、Laravel Blade 五种技术实现,适合搭建影视点播平台、在线课程网站或视频内容聚合站。
技术栈
- 前端框架: Vue 3 (Composition API)
- 构建工具: Vite
- 样式: Tailwind CSS + Bootstrap
- 国际化: vue-i18n
- 可选后端: Laravel + Blade
项目结构
text
streamithtml-540/streamit-html/
├── code-vue/ # Vue 3 主实现
│ ├── dashboard/ # 管理后台
│ │ ├── .env.example
│ │ ├── index.html
│ │ └── vite.config.js
│ └── frontend/ # 用户前端
│ ├── .env.example
│ ├── index.html
│ └── vite.config.js
├── code-react/ # React 实现
│ ├── dashboard/
│ └── frontend/
├── code-next/ # Next.js 实现
├── code-nuxt/ # Nuxt.js 实现
└── laravel+blade/ # Laravel 后端实现
└── .env.example
核心文件说明
code-vue/frontend/— 用户端主应用,包含首页、影片详情、播放器等页面code-vue/dashboard/— 管理后台,用于内容管理和数据分析code-next/— Next.js SSR 实现,含完整路由配置和 i18n 国际化code-nuxt/— Nuxt.js 实现,使用 Pinia store 管理状态laravel+blade/.env.example— Laravel 后端环境变量模板,配置数据库、Redis、邮件等服务
快速开始
bash
# Vue 前端
cd streamithtml-540/streamit-html/code-vue/frontend
npm install
npm run dev
# Vue 管理后台
cd streamithtml-540/streamit-html/code-vue/dashboard
npm install
npm run dev
# Next.js 版本
cd streamithtml-540/streamit-html/code-next
npm install
npm run dev
使用建议
该模板功能完整但体积较大,部署前建议按需裁剪。Next.js 版本支持 SSR 利于 SEO,适合作为主要生产方案。国际化配置集中在 i18n.ts 和 i18n.config.ts 中,正式使用前请完成多语言文案填充。
