Vite + Vue 3 + Vant + Ts

后端：video-platform

预配置

UI 框架

• UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎
  • @unocss/preset-rem-to-px - 将所有实用程序的 rem 转换为 px
  • eslint-plugin-unocss - Unocss 的 ESLint 插件
• Vant - 移动端 Vue 组件库
  • vant-touch-emulator - 在桌面端上模拟移动端 touch 事件
  • vant-use - Vant 内置的组合式 API

插件

• Vue Router
  • unplugin-vue-router - 以文件系统为基础的路由
• Pinia - 直接的, 类型安全的, 使用 Composition API 的轻便灵活的 Vue 状态管理库
  • pinia-plugin-persistedstate - 适用于 Pinia 的持久化存储插件
• Vue I18n - 国际化
  • unplugin-vue-i18n - Vue I18n 的 Vite 插件
• unplugin-vue-components - 自动加载组件
• unplugin-auto-import - 直接使用 Composition API 等，无需导入
• vite-plugin-vconsole - vConsole 的 vite 插件
• vite-plugin-mock-dev-server - vite mock 开发服务（mock-dev-server）插件
• postcss-mobile-forever - 一款 PostCSS 插件，将固定尺寸的移动端视图转为具有最大宽度的可伸缩的移动端视图
• vite-plugin-vue-devtools - 旨在增强Vue开发者体验的Vite插件
• vueuse - 实用的 Composition API 工具合集
• @unhead/vue - 响应式地操作文档头信息
• vite-plugin-pwa - PWA
• vite-plugin-sitemap - sitemap 和 robots 生成器
• @types/video.js - 网络视频播放器

编码风格

• 使用 Composition API 地 <script setup> SFC 语法
• ESLint 配置为 @antfu/eslint-config, 单引号, 无分号

开发工具

• TypeScript
• Vitest - 基于 Vite 的单元测试框架
• pnpm - 快, 节省磁盘空间的包管理器
• Netlify - 零配置的部署
• VS Code Extensions
  • Vite - 自动启动 Vite 服务器
  • Volar - Vue 3 <script setup> IDE 支持
  • Iconify IntelliSense - 图标内联显示和自动补全
  • i18n Ally - 多合一的 I18n 支持
  • ESLint

Node v18.19.0 (npm v10.8.2) (vite 5.3.4)

开发

只需要执行以下命令就可以在 http://localhost:3000 中看到

vite

构建

构建该应用只需要执行以下命令

vite build

然后你会看到用于发布的 dist 文件夹被生成。

License

Apache License License

Future

• 添加用户管理（在线用户），包含：在线用户消息发送，私聊等
• 添加收藏&历史记录
• 添加🎮模块，ws游戏交互，五子棋/俄罗斯方块对战版
• 动态线程池
• 添加prometheus业务监控，埋点
• 在线统计，统计用户访问量，访问次数，访问时长等
• 添加视频评论模块，评论回复，评论点赞等
• 爬虫/脚本管理
• 防火墙管理
• nginx 配置管理