Toast 轻提示
注册安装：
import { Toast } from 'vant'
Vue.use(Toast)
两种使用方式
① 导入调用(组件内或非组件中均可)
import { Toast } from 'vant'
Toast('提示内容')
② 通过this直接调用(必须组件内)
本质：将方法，注册挂载到了Vue原型上 Vue.prototype.$toast = xxx
this.$toast('提示内容')
import { Toast } from 'vant'
Toast('嘿嘿，你好哇')
全部导入
import Vant from 'vant'
import 'vant/lib/index.css'
插件安装初始化：内部会将所有的vant所有组件进行导入注册
Vue.use(Vant)
登录功能
步骤分析：
阅读接口文档，封装登录接口
登录前的校验(手机号，图形验证码，短信验证码)
调用方法，发送请求，成功添加提示并跳转
响应拦截器统一处理错误提示：通过响应拦截器，统一处理接口的错误提示
问题：每次请求，都有可能会错误，就都需要错误提示
说明：响应拦截器是咱们拿到数据的第一个数据流转站，可以在里面统一处理错误。只要不是 200，就给默认提示，抛出错误
添加请求 loading 效果：统一在每次请求后台时，添加 loading 效果
背景：有时候因为网络原因，一次请求的结果可能需要一段时间后才能回来，此时，需要给用户添加 loading 提示。
添加 loading 提示的好处：
节流处理：防止用户在一次请求还没回来之前，多次进行点击，发送无效请求
友好提示：告知用户，目前是在加载中，请耐心等待，用户体验会更好
实操步骤：
请求拦截器中，每次请求，打开 loading
响应拦截器中，每次响应，关闭 loading
所有的路由在真正被访问到之前(解析渲染对应组件页面前)，都会先经过全局前置守卫
只有全局前置守卫放行了，才会到达对应的页面
全局前置导航守卫
to: 到哪里去，到哪去的完整路由信息对象(路径，参数)
from: 从哪里来，从哪来的完整路由信息对象(路径，参数)
next(): 是否放行
(1) next() 直接放行，放行到to要去的路径
(2) next(路径) 进行拦截，拦截到next里面配置的路径
页面访问拦截
目标：基于全局前置守卫，进行页面访问拦截处理
路由导航守卫 - 全局前置守卫
所有的路由一旦被匹配到，都会先经过全局前置守卫
只有全局前置守卫放行，才会真正解析渲染组件，才能看到页面内容
访问权限页面时，拦截或放行的关键点？→ 用户是否有登录权证 token
router.beforeEach((to, from, next) => {
-
to 往哪里去，到哪去的路由信息对象
-
from 从哪里来，从哪来的路由信息对象
-
next() 是否放行
next()调用，就是放行
next(路径) 拦截到某个路径页面
})
加入购物车 - 封装数字框组件：封装弹层中的数字框组件
分析：组件名 CountBox
静态结构，左中右三部分
数字框的数字，应该是外部传递进来的 (父传子)
点击 + - 号，可以修改数字 (子传父)
使用 v-model 实现封装 (:value 和 @input 的简写)
数字不能减到小于 1
判断 token 是否存在
-
如果 token 不存在， 弹确认框
-
如果 token 存在，继续请求操作
消息确认用于确认消
confirmButtonText 确认按钮文案
cancelButtonText 取消按钮文案
购物车模块
说明：购物车 数据联动关系 较多，且通常会封装一些小组件，所以为了便于维护，一般都会将购物车的数据基于 vuex 分模块管理
需求分析：
基本静态结构 (快速实现)
构建 vuex cart 模块，获取数据存储
基于 数据 动态渲染 购物车列表
封装 getters 实现动态统计
全选反选功能
数字框修改数量功能
编辑切换状态，删除功能
空购物车处理
加入购物车
goodsId => 商品id
goodsSkuId => 商品规格id
后台返回的数据中，不包含复选框的选中状态，为了实现将来的功能
需要手动维护数据，给每一项，添加一个 isChecked 状态（标记当前商品是否选中）
