这门课解决什么实际问题

很多前端学习者卡在“会语法，不会做项目”的阶段：文档看懂了，组件也会搭，但一旦要独立开发一个完整的中后台系统，就不知道从哪里下手。这类痛点的核心，往往不是单个技术点的缺失，而是缺乏对业务流、权限流、数据流的整体把控能力。

这门课程以“商城后台管理系统”为载体，恰恰填补了这一空白。它不是零散知识点的堆砌，而是围绕真实业务场景，串联起 Vue3 全家桶的关键模块：从 Vite 构建配置、Vue-router4 路由权限控制，到 Vuex4 状态管理、ElementPlus 组件库的工程化使用，再到多权限角色切换、商品多规格管理、订单发货流程、导出功能、图库管理、分销逻辑以及海报生成等具体业务需求。你将在一个完整的系统中，理解这些技术如何协同工作，而不是孤立地记忆 API。

适合什么基础、建议先看哪几块

本课程适合已经掌握 Vue2 基础语法（如生命周期、组件通信、指令等），或熟悉 React 思路但想快速切入 Vue3 体系的初学者。如果你完全零基础，建议先补完 Vue 官方文档的基础部分，再进入本课程，否则可能在前期的语法差异（如 Composition API 与 Options API 的对比）上感到吃力。

学习顺序上，建议优先攻克三块内容：第一块是 Vue3 新语法与 Vite 构建，这是后续所有开发的基石；第二块是 Vue-router4 + 权限管理模块，这是中后台系统的核心骨架；第三块是 ElementPlus 组件库的实际应用，因为大量 UI 实现依赖它。掌握了这三部分，再深入商品规格、订单流程等业务细节，你会更容易理解代码背后的业务意图，而不是陷入细节泥潭。

学完能独立做什么、资料怎么配合练习

完成本课程后，你将能够独立搭建并维护一个具备多角色权限、包含商品、订单、分销等核心模块的中型后台管理系统。具体而言，你可以独立完成路由守卫配置、动态菜单渲染、Vuex 状态共享、复杂表单处理、文件导出以及基础的服务器部署流程。

建议的学习方式是：以项目驱动为主，不要只看不练。遇到核心概念（如 `<script setup>`、Pinia/Vuex 状态设计、路由懒加载）时，暂停视频，手动复现代码，并尝试修改参数观察效果。对于业务模块（如商品多规格、订单导出），建议先自己梳理一遍业务流程图，再看课程实现，对比差异能极大加深理解。如果遇到报错，优先查看官方文档和错误提示，而非直接复制答案，这样才能真正形成独立解决问题的能力。

课程目录

├──01.课程介绍/ │ └── [ 49M] 1.1-课程介绍（买前必看）.mp4
 ├──02.创建vite项目和配置/ │ ├── [ 16M] 2.1-创建vite项目并安装vscode插件.mp4
 │ ├── [7.9M] 2.2-引入ElmentPlus和基本使用.mp4
 │ ├── [6.2M] 2.3-引入windicss工具库和配置，安装代码提示.mp4
 │ ├── [ 26M] 2.4-windicss小案例和@apply简化代码.mp4
 │ ├── [ 12M] 2.5-引入vue-router4.mp4
 │ └── [ 26M] 2.6-路由配置和404页面捕获.mp4
 ├──03.登录页开发和功能实现/ │ ├── [ 63M] 3.1-登录页开发.mp4
 │ ├── [ 22M] 3.10-常用工具库封装.mp4
 │ ├── [ 22M] 3.11-引入vuex状态管理用户信息.mp4
 │ ├── [ 20M] 3.12-全局路由拦截实现登录判断.mp4
 │ ├── [ 40M] 3.13-登录功能完善.mp4
 │ ├── [ 34M] 3.14-退出登录功能实现.mp4
 │ ├── [ 18M] 3.15-全局loading进度条实现.mp4
 │ ├── [ 11M] 3.16-动态页面标题实现.mp4
 │ ├── [ 13M] 3.2-登录页响应式处理.mp4
 │ ├── [ 17M] 3.3-全局引入图标.mp4
 │ ├── [ 18M] 3.4-结合@apply实现样式抽离.mp4
 │ ├── [ 23M] 3.5-setup语法糖和组合式api.mp4
 │ ├── [ 21M] 3.6-登录表单验证处理.mp4
 │ ├── [ 49M] 3.7-引入axios请求库和登录接口交互.mp4
 │ ├── [ 22M] 3.8-引入cookie存储用户token.mp4
 │ └── [ 34M] 3.9-请求拦截器和响应拦截器.mp4
 ├──04.后台全局Layout布局开发/ │ ├── [ 20M] 4.1-后台主布局实现.mp4
 │ ├── [6.8M] 4.10-菜单选中和路由关联.mp4
 │ ├── [ 19M] 4.11-菜单数据前后端交互.mp4
 │ ├── [ 50M] 4.12-根据菜单动态添加路由.mp4
 │ ├── [ 54M] 4.13-标签导航组件实现-样式布局.mp4
 │ ├── [ 15M] 4.14-标签导航组件实现-同步路由和存储（一）.mp4
 │ ├── [ 34M] 4.15-标签导航组件实现-同步路由和存储（二）.mp4
 │ ├── [ 15M] 4.16-标签导航组件实现-关闭当前标签处理.mp4
 │ ├── [ 23M] 4.17-标签导航组件实现-关闭其他全部标签功能.mp4
 │ ├── [6.5M] 4.18-优化点击菜单加载速度.mp4
 │ ├── [ 13M] 4.19-keep-alive页面缓存.mp4
 │ ├── [ 46M] 4.2-公共头部开发-样式布局.mp4
 │ ├── [ 28M] 4.20-transition全局过渡动画.mp4
 │ ├── [ 34M] 4.3-公共头部开发-刷新和全屏.mp4
 │ ├── [ 54M] 4.4-公共头部开发-修改 │ ├── [ 47M] 4.5-通用弹框表单组件封装（一）.mp4
 │ ├── [ 33M] 4.6-通用弹框表单组件封装（二）.mp4
 │ ├── [ 29M] 4.7-组合式api封装简化代码.mp4
 │ ├── [ 48M] 4.8-侧边菜单开发-样式布局和路由跳转.mp4
 │ └── [ 33M] 4.9-展开和收起菜单功能实现.mp4
 ├──05.后台主控台开发和交互/ │ ├── [ 41M] 5.1-统计面板组件开发（一）.mp4
 │ ├── [ 20M] 5.2-统计面板组件开发（二）-骨架屏优化体验.mp4
 │ ├── [ 18M] 5.3-数字滚动动画实现.mp4
 │ ├── [ 44M] 5.4-分类组件开发和跳转.mp4
 │ ├── [ 43M] 5.5-echarts图表组件开发和交互（一）.mp4
 │ ├── [ 32M] 5.6-echarts图表组件开发和交互（二）.mp4
 │ ├── [ 36M] 5.7-店铺和交易提示组件开发和交互.mp4
 │ ├── [ 19M] 5.8-v-permission指令按钮级权限控制（一）.mp4
 │ └── [ 40M] 5.9-v-permission指令按钮级权限控制（二）.mp4
 ├──06.图库模块开发/ │ ├── [ 44M] 6.1-图库模块开发-布局实现（一）.mp4
 │ ├── [ 49M] 6.10-图片列表分页功能交互.mp4
 │ ├── [ 28M] 6.11-图片列表组件开发.mp4
 │ ├── [ 56M] 6.12-重命名和删除功能交互.mp4
 │ ├── [ 56M] 6.13-上传多图功能实现.mp4
 │ ├── [ 14M] 6.2-图库模块开发-布局实现（二）.mp4
 │ ├── [ 31M] 6.3-图库分类组件开发.mp4
 │ ├── [ 23M] 6.4-图库分类列表分页实现（一）.mp4
 │ ├── [ 19M] 6.5-图库分类列表分页实现（二）.mp4
 │ ├── [ 33M] 6.6-新增图库分类表单实现.mp4
 │ ├── [ 13M] 6.7-新增图库分类功能交互.mp4
 │ ├── [ 26M] 6.8-修改图库分类功能交互.mp4
 │ └── [ 21M] 6.9-删除图库分类功能实现.mp4
 ├──07.公告模块开发/ │ ├── [ 34M] 7.1-公告模块布局实现.mp4
 │ ├── [ 16M] 7.2-公告列表分页交互.mp4
 │ ├── [ 36M] 7.3-公告新增功能实现.mp4
 │ └── [ 37M] 7.4-公告删除和修改功能实现.mp4
 ├──08.管理员模块开发/ │ ├── [ 47M] 8.1-管理员列表分页交互.mp4
 │ ├── [ 20M] 8.2-搜索管理员功能实现.mp4
 │ ├── [ 26M] 8.3-修改管理员状态功能实现.mp4
 │ ├── [ 41M] 8.4-新增修改和删除管理员功能.mp4
 │ ├── [ 61M] 8.5-全局选中图库组件开发（一）.mp4
 │ ├── [ 31M] 8.6-全局选中图库组件开发（二）.mp4
 │ ├── [ 49M] 8.7-组合式API特性封装-列表分页搜索.mp4
 │ ├── [ 39M] 8.8-组合式API特性封装-新增修改.mp4
 │ └── [ 12M] 8.9-组合式API特性封装-修改状态和删除.mp4
 ├──09.菜单权限模块开发/ │ ├── [ 45M] 9.1-菜单权限列表实现.mp4
 │ ├── [ 26M] 9.2-树形控件自定义节点渲染.mp4
 │ ├── [7.6M] 9.3-修复标签导航和菜单联动问题.mp4
 │ ├── [ 64M] 9.4-新增和修改菜单权限功能（一）.mp4
 │ ├── [ 35M] 9.5-新增和修改菜单权限功能（二）.mp4
 │ ├── [ 41M] 9.6-自定义图标下拉选择组件.mp4
 │ └── [ 26M] 9.7-修改菜单权限状态和删除功能.mp4
 ├──10.角色模块开发/ │ ├── [ 37M] 10.1-复用代码快速实现角色模块开发.mp4
 │ ├── [ 27M] 10.2-配置权限表单-虚拟化树形控件.mp4
 │ ├── [ 32M] 10.3-配置权限表单-默认选中渲染.mp4
 │ └── [ 29M] 10.4-配置权限功能实现.mp4
 ├──11.商品规格管理开发/ │ ├── [ 47M] 11.1-商品规格模块-复用代码快速实现.mp4
 │ ├── [ 30M] 11.2-TagInput组件封装.mp4
 │ ├── [ 41M] 11.3-多选和批量删除规格实现.mp4
 │ └── [7.8M] 11.4-组合式API特性封装-批量删除功能.mp4
 ├──12.优惠券模块开发/ │ ├── [ 35M] 12.1-优惠券模块-复用代码快速实现.mp4
 │ ├── [ 22M] 12.2-优惠券模块-优化列表展示.mp4
 │ ├── [ 70M] 12.3-优惠券模块-新增修改功能实现.mp4
 │ └── [ 22M] 12.4-优惠券模块-失效优惠券功能实现.mp4
 ├──13.商品模块开发/ │ ├── [ 31M] 13.1-商品模块-复用代码实现.mp4
 │ ├── [ 20M] 13.10-设置商品轮播图功能（二）.mp4
 │ ├── [ 24M] 13.11-设置商品轮播图功能（三）.mp4
 │ ├── [ 35M] 13.12-设置商品轮播图功能（四）.mp4
 │ ├── [ 22M] 13.13-引入tinymce富文本编辑器.mp4
 │ ├── [ 45M] 13.14-修改商品详情功能实现.mp4
 │ ├── [ 16M] 13.15-富文本编辑器选择图片功能（1）.mp4
 │ ├── [ 36M] 13.16-富文本编辑器选择图片功能（2）.mp4
 │ ├── [ 49M] 13.17-设置单规格功能实现.mp4
 │ ├── [ 27M] 13.18-多SKU规格功能-规格选项（1）.mp4
 │ ├── [ 49M] 13.19-多SKU规格功能-规格选项（2）.mp4
 │ ├── [ 25M] 13.2-商品模块-Tabs标签页开发.mp4
 │ ├── [ 30M] 13.20-多SKU规格功能-添加规格选项.mp4
 │ ├── [ 21M] 13.21-多SKU规格功能-修改规格选项.mp4
 │ ├── [ 17M] 13.22-多SKU规格功能-删除规格选项.mp4
 │ ├── [ 22M] 13.23-多SKU规格功能-排序规格选项（1）.mp4
 │ ├── [ 26M] 13.24-多SKU规格功能-排序规格选项（2）.mp4
 │ ├── [ 17M] 13.25-多SKU规格列表-渲染选项的值.mp4
 │ ├── [ 28M] 13.26-添加规格选项的值功能实现.mp4
 │ ├── [ 21M] 13.27-修改规格选项的值功能实现.mp4
 │ ├── [ 12M] 13.28-删除规格选项的值功能实现.mp4
 │ ├── [ 37M] 13.29-规格选择弹框组件实现（1）.mp4
 │ ├── [ 51M] 13.3-自定义表格商品列表样式（一）.mp4
 │ ├── [ 34M] 13.30-规格选择弹框组件实现（2）.mp4
 │ ├── [ 36M] 13.31-规格选择弹框组件实现（3）.mp4
 │ ├── [ 18M] 13.32-规格选择弹框组件实现（4）.mp4
 │ ├── [ 29M] 13.33-规格表格联动（1）.mp4
 │ ├── [ 33M] 13.34-规格表格联动（2）.mp4
 │ ├── [ 46M] 13.35-规格表格联动（3）.mp4
 │ ├── [ 22M] 13.36-规格表格联动（4）.mp4
 │ ├── [ 40M] 13.37-规格表格联动（5）.mp4
 │ ├── [ 41M] 13.38-恢复回收站商品功能.mp4
 │ ├── [ 23M] 13.39-彻底删除回收站商品功能.mp4
 │ ├── [7.0M] 13.4-自定义表格商品列表样式（二）.mp4
 │ ├── [ 34M] 13.5-高级搜索功能实现.mp4
 │ ├── [ 48M] 13.6-封装搜索表单组件.mp4
 │ ├── [ 42M] 13.7-新增修改商品功能实现.mp4
 │ ├── [ 50M] 13.8-批量上架下架功能实现..mp4
 │ └── [ 51M] 13.9-设置商品轮播图功能（一）.mp4
 ├──14.商品分类模块开发/ │ ├── [ 22M] 14.1-商品分类模块开发（一）.mp4
 │ ├── [8.8M] 14.2-商品分类模块开发（二）.mp4
 │ ├── [ 42M] 14.3-推荐商品功能实现-样式布局.mp4
 │ ├── [ 21M] 14.4-推荐商品功能实现-删除关联.mp4
 │ ├── [ 42M] 14.5-选择商品弹框组件（1）.mp4
 │ └── [ 23M] 14.6-选择商品弹框组件（2）.mp4
 ├──15.会员和会员等级模块开发/ │ ├── [ 23M] 15.1-会员等级模块开发（1）.mp4
 │ ├── [ 30M] 15.2-会员等级模块开发（2）.mp4
 │ ├── [ 26M] 15.3-会员模块开发（1）.mp4
 │ └── [ 24M] 15.4-会员模块开发（2）.mp4
 ├──16.商品评论模块开发/ │ ├── [ 18M] 16.1-商品评论模块开发（一）.mp4
 │ ├── [ 22M] 16.2-商品评论模块开发（二）.mp4
 │ ├── [ 32M] 16.3-用户评价渲染.mp4
 │ ├── [ 29M] 16.4-回复用户评价功能（一）.mp4
 │ └── [ 21M] 16.5-回复用户评价功能（二）.mp4
 ├──17.订单模块开发/ │ ├── [ 35M] 17.1-订单模块-复用代码快速实现.mp4
 │ ├── [ 27M] 17.10-同意拒绝退款功能实现.mp4
 │ ├── [ 66M] 17.2-自定义订单列表样式.mp4
 │ ├── [ 21M] 17.3-订单模块-高级搜索功能实现.mp4
 │ ├── [ 46M] 17.4-导出订单功能（1）-表单样式.mp4
 │ ├── [ 31M] 17.5-导出订单功能（2）-功能实现.mp4
 │ ├── [ 66M] 17.6-查看订单详情功能实现（一）.mp4
 │ ├── [ 46M] 17.7-查看订单详情功能实现（二）.mp4
 │ ├── [ 28M] 17.8-查看物流信息功能实现（一）.mp4
 │ └── [ 31M] 17.9-查看物流信息功能实现（二）.mp4
 ├──18.基础、物流和交易设置页开发/ │ ├── [ 47M] 18.1-基础设置功能开发（一）.mp4
 │ ├── [ 40M] 18.2-基础设置功能开发（二）.mp4
 │ ├── [ 40M] 18.3-物流和交易设置开发（1）.mp4
 │ ├── [ 57M] 18.4-物流和交易设置开发（2）.mp4
 │ └── [ 34M] 18.5-物流和交易设置开发（3）.mp4
 ├──19.分销模块开发/ │ ├── [ 46M] 19.1-分销员管理开发（一）-统计.mp4
 │ ├── [ 66M] 19.2-分销员管理开发（二）.mp4
 │ ├── [ 85M] 19.3-分销员管理开发（三）.mp4
 │ └── [ 62M] 19.4-分销设置页开发.mp4
 ├──20.部署服务器上线/ │ ├── [ 83M] 20.1-部署前环境搭建.mp4
 │ ├── [ 11M] 20.2-域名购买和解析.mp4
 │ └── [ 23M] 20.3-前端打包上线部署.mp4
 ├──ml.txt └──课件资料/ ├── [413K] tinymce富文本编辑器引入.zip
 ├── [9.4M] 后端api源码【仅供参考】.zip
 ├── [427K] 完整代码.zip
 ├── [376K] 完整前端代码（参考版，非最终完整版）.zip
 ├── [ 14K] 课时10.全局引入图标.zip
 … 其余 1

69 项略，目录共 369 项