你将学到的
  • Chrome 调试工具的使用
  • axios 库配置使用
  • Vue-router 路由管理
  • 前后端跨域解决方案
  • Vue-CLI 初始化项目
  • Vuex 全局状态管理
  • Vue 通用组件设计
  • webpack 打包发布
课程内容
  共13个章节
实验 1 环境搭建

知识点: 1.Vuecli简介 2.Vuecli创建基础项目 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.使用axios进行前后端通信 2.基本Vue、CSS的了解和应用 3.了解flex布局

实验 5 编写实验楼首页(中)

知识点: 1.使用axios进行前后端通信 2.使用VueJS一些内置的语法糖 3.使用Vue过渡组件

实验 6 编写实验楼首页(下)

知识点: 1.针对内容进行合理抽象 2.封装复用组件 3.了解原生CSS的过渡 4.Vue子父组件传值

挑战 2 挑战:优化实验楼首页--近期好课的展示

知识点: 1.绝对定位 2.溢出隐藏 3.Vue过渡组件

实验 7 编写课程挑选页

知识点: 1.路由过渡/监控/参数设置修改 2.Vuex初探 3.滚动导航

实验 8 编写课程详情页(上)

知识点: 1.分析整体结构 2.编写子导航 3.编写课程基础介绍 4.内容&课程详细介绍 5.内容使用Markdown编译 6.未登录状态下评论等内容的处理

挑战 3 挑战:编写课程问答页面

知识点: 1.组件使用 2.父子组件传值 3.keepalive组件熟悉使用

实验 9 编写课程详情页(下)

知识点: 1.分析右部分结构 2.区分下拉和普通状态下的右边显示 3.zindex了解使用

实验 10 处理登录与打包发布

知识点: 1.获取登录用的API 2.初步了解Cookies,Session,区分通过转发的登录与直接登录 3.完善首页登录后的页面与功能 4.完善课程详情页登录后的页面与功能 5.创建Github账号(如果没有的话) 6.利用webpack进行打包 7.基于开发环境与生产环境配置一些内容 8.利用Github中进行发布 9.基于GithubPage做history模式发布的探讨

课程介绍

课程使用 Vue.js 来仿实验楼网站实现其部分页面。我们从零开始,使用 Chrome 分析网络和调试代码,逆向分析出实验楼 API,绕过跨域限制。再从基础静态页开始,分析布局整理样式到最终完整实现。涉及路由,钩子,动画过渡,flex 布局,前后端通信,Vuex 全局状态管理,设计与封装通用性组件,处理 Cookies,登录交互等内容。由浅入深,层层递进,并最终打包发布。从零到一,从开发环境到生产环境全部涉及。

先学课程

课程难度

  • 中等

适合人群

  • 适合了解一定前端知识,想要学习 Vue.js 、了解完整开发到上线流程的学员。

课程信息

  • 学习周期:课程有效期 2 个月,2 个月后无法进行在线实验,但可查看文档内容。高级会员有效期内可一直学习,到期后课程失效,且无法查看文档。部分云主机实验环境因成本较高,存在开启次数限制。关于课程退款等相关注意事项说明,请阅读 用户付费协议
  • 版权说明:课程内容为实验楼原创或实验楼在原作者授权下制作。未经书面同意,擅自爬取、转载和再分发课程内容,均将受到严肃追责。
  • 企业团报:企业购买,请点击 企业用户咨询
课程教师

Cyrbuzzi 共发布过 1 门课程

查看老师的所有课程 >
蓝桥楼+
蓝桥会员
会员
开通会员,即刻开始学习