课程大纲：

Vue.js 和 Django 仿简易版楼网站培训

使用 Vue.js 来实现楼的部分页面克隆。

首先，我们将接触调试代码，使用 Chrome 分析网络逆向分析出楼 API，绕过跨域限制。

然后再从基础静态页开始，分析布局整理样式到终完整实现。

1 Chrome 调试工具的使用

2 axios 库配置使用

3 Vue-router 路由管理

4 前后端跨域解决方案

5 Vue-CLI 初始化项目

6 Vuex 全局状态管理

7 Vue 通用组件设计

8 webpack 打包发布

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模式发布的探讨