00-课程思路

前置储备

必备前提：

• HTML+CSS+Javascript

• WebAPI（DOM+BOM）

• Ajax

可选前提：

Node.js

第一部分：前端工程化与Webpack

• 前端工程化的相关概念

• Webpack的常见用法

• 打包发布

• Source Map

目标：

1. 了解工程化的前端开发方式

2. 了解Webpack在实际开发中所起到的作用

第二部分：Vue基础入门 - part1

• Vue的基本使用步骤

• Vue中常用的指令

• vue-devtools调试工具

目标：

1. 能够使用Vue的指令完成页面结构的渲染

2. 能够使用Vue的调试工具辅助Vue的开发

第三部分：Vue基础入门 - part2

• 过滤器和侦听器

• 计算属性的用法

• axios的基本用法

• vue-cli的安装和使用

目标：

1. 能够在实际开发中合理运用侦听器、过滤器、计算属性解决自己的问题

2. 能够使用axios发起ajax请求

3. 能够使用vue-cli工具生成工程化的Vue项目

第四部分：组件与生命周期

• 组件的注册与使用

• 组件的props自定义属性

• 解决组件样式冲突

• 组件的生命周期

• 组件之间的通讯（数据共享）

目标：

1. 能够掌握.vue单文件组件的基本用法

2. 能够掌握组件通讯的三种方式

3. 掌握组件生命周期的执行顺序和应用场景

第五部分：ref&购物车案例

• 使用ref引用DOM元素和组件实例

• $nextTick的基本使用

• 购物车案例

目标：

1. 能够使用ref获取页面上DOM或组件的引用

2. 能够知道$nextTick的应用场景并合理地使用

3. 通过”购物车案例”巩固前4天所学的知识

第六部分：Vue组件的高级用法

• 动态组件的使用

• 插槽的使用（默认插槽、具名插槽、作用域插槽）

• 自定义指令

• ESLint的使用

目标：

1. 能够使用keep-alive实现组件的缓存

2. 能够使用插槽提高组件的复用性

3. 能够了解常见的ESLint语法规则

第七部分：路由（vue-router）

• 路由的基本配置和使用

• 路由重定向

• 嵌套路由、动态路由

• 编程式导航、路由导航守卫

目标：

1. 能够在项目中安装和配置路由

2. 能够使用路由实现单页面应用程序开发

3. 能够使用导航守卫控制路由的访问权限

第八部分：黑马头条（收尾案例）

• Vant组件库

• 封装axios

• 上拉加载&下拉刷新

• Vant主题定制

目标：

1. 掌握Vant组件库的基本使用

2. 能够知道如何封装axios请求模块

3. 能够知道如何实现上拉加载和下来刷新功能