Vue3 + Vite 开发知识付费课程小程序：从首页到视频播放器的完整实现

【源码】Vue3 Vite 开发知识付费课程小程序从首页到视频播放器的完整实现知识付费是近年来的热门赛道。本文实现了一个完整的课程商城小程序包含首页推荐、课程列表/详情、视频播放器、学习进度管理、个人中心五大模块蓝紫渐变配色视觉现代。一、项目效果展示五大核心页面页面亮点功能首页Banner 轮播、分类标签、免费精品横滑、热门课程列表课程列表搜索栏、分类 Tab 筛选、2 列网格展示课程详情标签页切换大纲/简介/评价、讲师卡片、限时折扣、购买栏视频播放器模拟播放器 UI、进度条、倍速切换、目录切换个人中心会员卡片、学习统计、菜单列表二、技术栈技术版本说明Vue 3.4^3.4.0script setupComposition APITypeScript^5.3.0完整类型定义Vite 5^5.1.0毫秒级热更新Vue Router 4^4.3.0动态路由支持Pinia^2.1.7已集成预留扩展SCSS^1.70.0主题变量 全局样式三、蓝紫渐变主题色// src/styles/variables.scss $primary: #5b6ef5; // 紫蓝主色 $primary-light: #7b8ef8; $primary-dark: #4455e0; $purple: #8b5cf6; $gradient: linear-gradient(135deg, #5b6ef5, #8b5cf6); // 全局渐变 $bg: #f5f5fa; $white: #fff; $text: #1a1a2e; $text-sub: #555; $text-hint: #999; $border: #eef0ff; $gold: #f59e0b; // 金色标签四、首页实现!-- src/pages/index/index.vue -- template div classhome-page !-- 顶部 Bar -- div classtop-bar div classtop-left p classbrand知学堂/p p classslogan每天进步一点点/p /div div classsearch-icon clickrouter.push(/courses) svg width22 height22 viewBox.../ /div /div !-- Banner 轮播 -- div classbanner div classbanner-slides :style{ transform: translateX(-${idx * 100}%) } div v-forb in banners :keyb.id classbanner-slide :style{ background: b.bg } div classbanner-text h3{{ b.title }}/h3 p{{ b.desc }}/p button clickrouter.push(/courses)立即学习 →/button /div span classbanner-emoji{{ b.emoji }}/span /div /div div classdots span v-for(_, i) in banners :keyi :class{ active: i idx } clickidx i / /div /div !-- 分类标签 -- div classcat-section div v-forcat in cats :keycat.id classcat-item clickrouter.push(/courses) div classcat-icon :style{ background: cat.bg }{{ cat.emoji }}/div span{{ cat.name }}/span /div /div !-- 免费精品 -- div classsection div classsection-header span classtitle 免费精品/span span classmore clickrouter.push(/courses)更多 ›/span /div div classcourse-row div v-forc in freeCourses :keyc.id classcourse-card-sm clickrouter.push(/course/${c.id}) div classc-cover :style{ background: c.bg }{{ c.emoji }}/div p classc-title{{ c.title }}/p span classc-free免费/span /div /div /div !-- 热门课程 -- div classsection div classsection-header span classtitle 热门课程/span span classmore clickrouter.push(/courses)更多 ›/span /div div classcourse-list div v-forc in hotCourses :keyc.id classcourse-card-h clickrouter.push(/course/${c.id}) div classch-cover :style{ background: c.bg }{{ c.emoji }}/div div classch-info p classch-title{{ c.title }}/p p classch-sub{{ c.teacher }} · {{ c.students }}人学习/p div classch-bottom span classch-price¥{{ c.price }}/span span classch-tag{{ c.tag }}/span /div /div /div /div /div /div /template script setup langts import { ref, onMounted, onUnmounted } from vue import { useRouter } from vue-router const router useRouter() const idx ref(0) let timer: ReturnTypetypeof setInterval const banners [ { id: 1, title: Python 零基础到就业, desc: 30天系统学习拿到第一份编程工作, emoji: , bg: linear-gradient(135deg, #667eea, #764ba2) }, { id: 2, title: 产品经理 成长路线, desc: 从零到资深PM系统课程体系, emoji: , bg: linear-gradient(135deg, #f093fb, #f5576c) }, { id: 3, title: 短视频运营 变现指南, desc: 0粉账号起号30天10万粉, emoji: , bg: linear-gradient(135deg, #4facfe, #00f2fe) }, ] const cats [ { id: 1, name: 编程开发, emoji: , bg: #eef0ff }, { id: 2, name: 产品设计, emoji: , bg: #fff0ee }, { id: 3, name: 运营营销, emoji: , bg: #f0fdf4 }, { id: 4, name: 职场提升, emoji: , bg: #fdf4ff }, { id: 5, name: 财经投资, emoji: , bg: #fff8e0 }, { id: 6, name: 生活技能, emoji: , bg: #e0f8ff }, ] const hotCourses [ { id: 1, title: Python 爬虫实战从入门到精通, teacher: 张老师, students: 1.2万, price: 199, emoji: , bg: linear-gradient(135deg, #eef0ff, #dde0ff), tag: 好评99% }, { id: 2, title: 短视频运营·抖音从0到10万粉, teacher: 李运营, students: 8600, price: 299, emoji: , bg: linear-gradient(135deg, #fff0ee, #ffd0c8), tag: 热门 }, { id: 3, title: Vue3TypeScript 全栈实战项目, teacher: 王前端, students: 3400, price: 399, emoji: ⚡, bg: linear-gradient(135deg, #f0fff4, #c8ffda), tag: ⭐ 推荐 }, { id: 4, title: 产品经理从0到1核心技能手册, teacher: 陈PM, students: 5200, price: 249, emoji: , bg: linear-gradient(135deg, #fdf4ff, #f0d8ff), tag: 新课 }, ] onMounted(() { timer setInterval(() { idx.value (idx.value 1) % banners.length }, 4000) }) onUnmounted(() clearInterval(timer)) /script五、课程详情页Tab 切换!-- src/pages/course/detail.vue -- template div classdetail-page !-- 封面 播放按钮 -- div classcourse-cover :style{ background: course.bg } div classcover-inner span classcover-emoji{{ course.emoji }}/span div classplay-btn clickrouter.push(/learn/${course.id})▶/div /div /div !-- 基本信息 -- div classcourse-info h2 classcourse-title{{ course.title }}/h2 div classcourse-meta span⭐ {{ course.rating }}/span span {{ course.students }}人学习/span span {{ course.lessonCount }}节课/span /div div classprice-row span classprice¥{{ course.price }}/span span classorigin¥{{ course.originalPrice }}/span span classdiscount-tag限时{{ Math.round(course.price / course.originalPrice * 10) }}折/span /div /div !-- 讲师卡片 -- div classteacher-card div classteacher-avatar{{ course.teacher[0] }}/div div classteacher-info p classteacher-name{{ course.teacher }}/p p classteacher-desc{{ course.teacherDesc }}/p /div button classfollow-btn 关注/button /div !-- 标签页切换 -- div classtabs span v-fort in tabs :keyt :class{ active: activeTab t } clickactiveTab t{{ t }}/span /div !-- 课程大纲 -- div v-ifactiveTab 大纲 classoutline div v-forchapter in course.chapters :keychapter.id classchapter div classchapter-title span {{ chapter.title }}/span span classchapter-count{{ chapter.lessons.length }}节/span /div div v-forlesson in chapter.lessons :keylesson.id classlesson-item clickplayLesson(lesson) span{{ lesson.free ? : }} {{ lesson.title }}/span span classlesson-duration{{ lesson.duration }}/span /div /div /div !-- 课程简介 -- div v-ifactiveTab 简介 classintro p{{ course.desc }}/p div classlearn-list p classlearn-title你将学到/p div v-foritem in course.learns :keyitem classlearn-item✅ {{ item }}/div /div /div !-- 购买栏 -- div classbuy-bar div classbuy-price span classcurrent-price¥{{ course.price }}/span span classorigin-price¥{{ course.originalPrice }}/span /div button classbtn-free clickrouter.push(/learn/${course.id})免费试学/button button classbtn-buy clicktoast(立即报名成功)立即报名/button /div /div /template script setup langts import { ref } from vue const activeTab ref(大纲) const tabs [大纲, 简介, 评价] const course { id: 1, emoji: , bg: linear-gradient(135deg, #667eea, #764ba2), title: Python 爬虫实战从入门到精通, rating: 4.9, students: 1.2万, lessonCount: 56, price: 199, originalPrice: 399, teacher: 张老师, teacherDesc: 10年Python开发经验曾就职于BAT已帮助5万学员就业, desc: 本课程从Python基础讲起系统讲解爬虫原理、Requests/Scrapy框架、反爬技术..., learns: [掌握Python基础语法, 熟练使用Requests/BeautifulSoup, 掌握Scrapy框架, 突破常见反爬机制, 完成5个真实项目], chapters: [ { id: 1, title: 第一章Python基础, lessons: [ { id: 1, title: 课程介绍与学习路线, duration: 15:30, free: true }, { id: 2, title: 环境搭建AnacondaVSCode, duration: 20:15, free: true }, { id: 3, title: 变量、数据类型与运算符, duration: 35:00, free: false }, ]}, { id: 2, title: 第二章网络请求基础, lessons: [ { id: 5, title: HTTP协议详解, duration: 25:00, free: false }, { id: 6, title: Requests库入门, duration: 30:45, free: false }, ]}, ], } /script style langscss .buy-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 390px; height: 60px; background: #fff; border-top: 1px solid $border; display: flex; align-items: center; padding: 0 12px; gap: 8px; } .btn-buy { background: $gradient; color: #fff; border: none; padding: 10px 18px; border-radius: 20px; font-size: 14px; cursor: pointer; } /style六、视频播放器!-- src/pages/learn/player.vue -- template div classplayer-page !-- 视频播放区 -- div classvideo-area div classvideo-placeholder :style{ background: course.bg } span classvideo-emoji{{ course.emoji }}/span div classvideo-controls-overlay button classcontrol-btn clickprev⏮/button button classplay-btn clicktogglePlay{{ playing ? ⏸ : ▶ }}/button button classcontrol-btn clicknext⏭/button /div /div !-- 进度条 -- div classprogress-area span classtime{{ formatTime(currentTime) }}/span div classprogress-track clickseek div classprogress-fill :style{ width: (currentTime / duration * 100) % } / /div span classtime{{ formatTime(duration) }}/span /div !-- 倍速 -- div classspeed-row span v-fors in speeds :keys :class{ active: speed s } clickspeed s{{ s }}x/span /div /div !-- 课程目录 -- div classoutline-section div classoutline-header span classoutline-title 课程目录/span span classoutline-sub{{ course.title }}/span /div div v-forlesson in course.lessons :keylesson.id classlesson-item :class{ active: lesson.id currentLesson.id } clickselectLesson(lesson) span classlesson-num{{ lesson.id }}/span div classlesson-info p classlesson-title{{ lesson.title }}/p span classlesson-meta{{ lesson.duration }} · {{ lesson.free ? 免费 : 已购 }}/span /div span v-iflesson.id currentLesson.id classplaying-icon▶/span span v-else-iflesson.done classdone-icon✓/span /div /div /div /template script setup langts import { ref, onUnmounted } from vue const playing ref(false) const currentTime ref(0) const duration ref(915) // 15:15 const speed ref(1) const speeds [0.5, 1, 1.5, 2] let timer: ReturnTypetypeof setInterval const course { id: 1, title: Python 爬虫实战, emoji: , bg: linear-gradient(135deg, #667eea, #764ba2), lessons: [ { id: 1, title: 课程介绍与学习路线, duration: 15:30, free: true, done: true }, { id: 2, title: 环境搭建AnacondaVSCode, duration: 20:15, free: true, done: true }, { id: 3, title: 变量、数据类型与运算符, duration: 35:00, free: false, done: false }, // ... ], } const currentLesson ref(course.lessons[0]) function togglePlay() { playing.value !playing.value if (playing.value) { timer setInterval(() { if (currentTime.value duration.value) currentTime.value speed.value else { playing.value false; clearInterval(timer) } }, 1000) } else { clearInterval(timer) } } function selectLesson(lesson: typeof course.lessons[0]) { currentLesson.value lesson currentTime.value 0 playing.value false clearInterval(timer) duration.value parseInt(lesson.duration.split(:)[0]) * 60 parseInt(lesson.duration.split(:)[1]) } function formatTime(s: number) { const m Math.floor(s / 60) const sec Math.floor(s % 60) return ${String(m).padStart(2, 0)}:${String(sec).padStart(2, 0)} } onUnmounted(() clearInterval(timer)) /script七、学习进度管理!-- src/pages/learn/list.vue -- template div classlearn-list-page div classheaderh2我的学习/h2/div div classtabs span v-fort in tabs :keyt :class{ active: activeTab t } clickactiveTab t{{ t }}/span /div div classcourse-list div v-forc in myCourses :keyc.id classcourse-item clickrouter.push(/learn/${c.id}) div classc-cover :style{ background: c.bg }{{ c.emoji }}/div div classc-info p classc-title{{ c.title }}/p p classc-teacher{{ c.teacher }}/p div classprogress-bar div classprogress-fill :style{ width: c.progress % } / /div p classprogress-text已学 {{ c.progress }}% · 上次学到第{{ c.lastLesson }}节/p /div button classcontinue-btn继续/button /div /div /div /template script setup langts const myCourses [ { id: 1, title: Python 爬虫实战, teacher: 张老师, progress: 45, lastLesson: 12, emoji: , bg: linear-gradient(135deg,#eef0ff,#dde0ff) }, { id: 3, title: Vue3TS 全栈实战, teacher: 王前端, progress: 20, lastLesson: 5, emoji: ⚡, bg: linear-gradient(135deg,#f0fff4,#c8ffda) }, ] /script style langscss .progress-bar { height: 4px; background: $border; border-radius: 2px; } .progress-fill { height: 100%; background: $gradient; border-radius: 2px; } .continue-btn { background: $gradient; color: #fff; border: none; padding: 6px 12px; border-radius: 14px; font-size: 13px; cursor: pointer; } /style八、完整 API 接口定义// src/api/index.tsexportinterfaceCourse{id:number;title:string;subtitle:string;cover:stringprice:number;originalPrice:numbertype:video|audio|column|livecategory:string;lecturer:Lecturer studentCount:number;chapterCount:numberrating:number;tags:string[];chapters:CourseChapter[]}exportinterfaceLearnProgress{courseId:number;chapterId:number;progress:number;lastLearnAt:string}exportconstgetHomeData()req(/home)exportconstgetCourseList(params:{...})req(/courses,params)exportconstgetCourseDetail(id:number)reqCourse(/courses/${id})exportconstgetMyCourses(page1)req(/my/courses,{page})exportconstsaveProgress(courseId:number,chapterId:number,progress:number)post(/my/progress,{courseId,chapterId,progress})exportconstpurchaseCourse(courseId:number,couponId?:number)post(/orders/course,{courseId,...(couponId?{couponId}:{})})九、源码获取完整源码包含✅ 6 个完整页面首页 / 课程列表 / 详情 / 学习中心 / 播放器 / 个人中心✅ 蓝紫渐变主题 UI✅ 视频播放器模拟 UI进度条 / 倍速 / 目录✅ 完整 API 接口规范✅ 学习进度系统闲鱼搜索「源码老李-知识付费Vue3课程商城小程序」即可找到纯前端 UI可直接对接后端或作为毕业设计参考。十、扩展方向接入真实视频— 对接腾讯云点播或 B 站视频实现真实播放支付系统— 接入微信支付/支付宝购买课程学习提醒— 定时推送该学习了通知会员体系— 开发包月/包年会员模式标签Vue3知识付费在线教育视频播放器课程商城前端开发