Vue3 + TypeScript 仿简易版蓝桥云课
本项目使用 Vue.js 来仿蓝桥云课网站实现其部分页面。从零开始使用 Chrome 分析网络和调试代码,逆向分析出蓝桥云课 API,绕过跨域限制。再从基础静态页开始,分析布局整理样式到最终完整实现。涉及路由,钩子,动画过渡,flex 布局,前后端通信,Vuex 全局状态管理,设计与封装通用性组件,处理 Cookies,登录交互等内容。由浅入深,层层递进,并最终打包发布。
¥119
完成学生认证,立享5折优惠>>
505 人学过
81 次评价
难度: 中级
综合评分: 9.2
2023-07-12 更新
课程介绍
章节目录
课程评价 81
项目价值

image

项目体验
仿蓝桥云课
组合推荐
一套吃透 Vue 和 Django
3门课总价 ¥119
一键畅学 270+ 门实战课
功能架构

图片描述

技术架构

图片描述

适合人群

图片描述

8
实验
2
挑战
实验1 环境搭建 试学

知识点: 1.Vite简介 2.Vite创建基础项目 3.使用Django搭建API转发 4.跨域简述 5.Vue开发环境跨域配置 6.项目结构

实验2 使用 Chrome 分析蓝桥 API 试学

知识点: 1.Chrome前端分析工具简介 2.Chrome前端分析工具使用 3.Element模块介绍 4.Console模块介绍及使用 5.Source模块介绍及使用 6.Network模块介绍及使用 7.Performance模块介绍及使用 8.Application模块介绍及使用

挑战1 挑战:使用 Chrome 抓取首页 API

知识点: 1.使用Chrome分析 2.Network模块查看分析 3.SSR渲染下的API获取

实验3 配置项目路由

知识点: 1.VueRouter使用 2.HASH和HISTORY模式 3.钩子使用 4.组件懒加载

实验4 编写首页(上)

知识点: 1.基本Vue3、less的了解和应用 2.了解flex,grid布局

实验5 编写首页(中)

知识点: 1.Vueslot 2.Vuesetupprops 3.Tsinterface 4.父子组件通信 5.针对内容进行合理抽象 6.封装复用组件

实验6 编写首页(下)

知识点: 1.axios封装使用 2.Tsinterface使用

实验7 编写课程挑选页

知识点: 1.pinia 2.滚动导航 3.grid布局 4.vueuse使用

挑战2 挑战:编写课程详情页

知识点: 1.flex布局 2.sticky布局 3.axios的使用 4.router的注册及使用 5.路由传参配置 6.Vue基础

实验8 打包发布

知识点: 1.创建Github账号(如果没有的话) 2.利用Vite进行打包 3.基于开发环境与生产环境配置一些内容 4.利用Github进行发布

关注