一、前端项目搭建
1、使用脚手架工具搭建项目
2、准备静态资源（图片资源）
将准备好的静态资源拖至public目录下
3、调整生产项目结构
公共的样式
公共js
首页拆解步骤
①分析页面结构
标题、轮播图、本周推荐、精选景点、底部导航
②新建页面组件
③新建对应组件
二、网络请求库axios
步骤：1、了解什么是axios
2、了解什么是Promise
3、掌握如何安装axios
4、掌握如何进行使用axios
1、疑问：为何不能在Vue.js中使用AJAX
AJAX是通过浏览器后台与服务器通信的技术
jQuery中的AJAX只是基于jQuery的实现
在Vue.js中使用jQuery不能充分利用Vue.js的特性
2、什么是axios
①基于Promise的HTTP库
②支持Node.js和浏览器
浏览器:XMLHttpRequest
Node.js: http
3、了解什么是Promise
关于Promise:一种异步编程解决方案,Promise其实一直都在，只是在ES6时，才被并入标准库，Promise的两个核心函数，then函数和catch函数
4、如何安装axios
使用npm安装:
安装到dependencies(生产环境依赖)
①npm install axios -save
②npm install axios -S
安装到devDependencies(开发环境依赖)
①npm install axios --save-dev
②npm install axios -D
axios请求响应拦截
①了解请求响应拦截的使用场景
②掌握如何对请求响应做统一的处理
请求响应拦截的使用场景
①设置自定义请求头
②默认携带上次的cookie
③添加loading动画思路(请求发起前显示、完成后隐藏)
④统一的错误处理
请求响应拦截的实现方式
常用的参数：
①headers：设置请求头
②timeout：超时的毫秒数
③data POST/PUT/PATCH请求的数据
④params:URL中的参数
⑤responseType:默认为json
统一处理错误：
400：参数错误提示
500/504：服务器正忙，网络异常/请求超时
401：未登录，跳转到登录页面
总结：对axios进行全局配置可提升代码的可维护性
三、前端组件开发
1、VantUI初探
①了解VantUI的使用场景
②掌握Vue项目中相关库/扩展的安装
③掌握VantUI的安装和使用
2、什么是VantUI
轻量、可靠的移动端Vue组件库
3、安装VantUI
npm install vant -S
4、引入VantUI组件
使用其他的UI库也都是相同的思路
5、轮播图组件的开发
①查找Vant中可以使用的组件
②实现组件模板部分
③模型层准备数据
④模拟数据，实现轮播效果
四、总结
Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js 环境。它可以用来发送异步 HTTP 请求（如 GET、POST、PUT、DELETE 等）到 RESTful API 或其他 HTTP 服务。Axios 提供了简单易用的 API，使得发送请求和处理响应变得非常直观。
以下是一些 Axios 的关键特性和功能：
-
基于 Promise：Axios 的所有请求都返回一个 Promise 对象，这使得它非常适合与 async/await 语法一起使用，从而实现更简洁和易读的异步代码。
-
请求和响应拦截器：你可以添加请求拦截器和响应拦截器，以便在请求发送之前或响应被处理之前执行一些操作，如添加认证 token、处理错误等。
-
自动转换 JSON 数据：Axios 会自动将响应内容转换为 JSON 对象（如果响应头中的 Content-Type 表明是 JSON）。
-
支持取消请求：你可以使用 CancelToken 来取消请求。
-
并发请求：Axios 提供了
axios.all方法，用于处理并发请求，并在所有请求完成后执行某个操作。 -
浏览器和 Node.js 支持：Axios 可以在浏览器和 Node.js 环境中使用，无需修改代码。
-
自定义配置：你可以为请求设置默认配置，如 baseURL、超时时间、请求头等。
-
防止跨站请求伪造（XSRF）：Axios 支持自动发送 XSRF token。
Promise 是 JavaScript 中用于异步编程的一个重要概念。它代表了一个可能现在还不可用，但将来某个时刻会变得可用的值。Promise 对象可以处于以下三种状态之一：
- Pending（等待）：初始状态，既不是成功，也不是失败状态。
- Fulfilled（已成功）：意味着操作成功完成。
- Rejected（已失败）：意味着操作失败。
Promise 提供了 .then() 和 .catch() 方法来处理异步操作成功或失败的情况，以及 .finally() 方法来执行无论成功或失败都需要执行的代码。
使用 .then() 方法可以添加处理成功情况的回调函数，使用 .catch() 方法可以添加处理失败情况的回调函数：
VantUI是一个基于Vue.js的移动端组件库，旨在为开发者提供一套轻量、可靠、高性能的移动端UI组件。