**1.**项目演示
目标：查看项目效果，明确功能模块 → 完整的电商购物流程
**2.**创建项目
在cmd(win + R)中输入 vue create project-name
选中自定义（第三个）
**3.**调整初始化目录
目标：将目录调整成符合企业规范的目录
**4.**vant 组件库
目标：认识第三方 Vue组件库 vant-ui
组件库：第三方 封装 好了很多很多的 组件，整合到一起就是一个组件库。
链接：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/
**5.**其他 Vue 组件库
目标：了解其他 Vue 组件库
Vue的组件库并不是唯一的，vant-ui 也仅仅只是组件库的一种。
一般会按照不同平台进行分类：
（1）PC端： element-ui (element-plus) ant-design-vue
（2）移动端：vant-ui Mint UI(饿了么) Cube UI(滴滴)
6. vant 全部导入（方便） 和 按需导入（性能）【推荐】
（1）目标：阅读文档，掌握 全部导入 的基本使用
全部导入：
（2）目标：阅读文档，掌握 按需导入 的基本使用
按需导入：
**7.**项目中的 vw 适配
目标：基于 postcss 插件 实现项目 vw 适配
px => vx
**8.**路由设计配置
（1）目标：分析项目页面，设计路由，配置一级路由
但凡是单个页面，独立展示的，都是一级路由
（2）目标：阅读vant组件库文档，实现底部导航 tabbar
tabbar标签页：
（3）目标：基于底部导航，完成二级路由配置
**9.**登录页静态布局
（1）request模块 - axios 封装
目标：将 axios 请求方法，封装到 request 模块
使用 axios 来请求后端接口, 一般都会对 axios 进行 一些配置 (比如: 配置基础地址，请求响应
拦截器等) 所以项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个 request 模块
中, 便于维护使用
接口文档地址：
https://apifox.com/apidoc/shared-12ab6b18-adc2-444c-ad11-0e60f5693f66/doc-2221080
基地址：http://cba.itlike.com/public/index.php?s=/api/
（2）图形验证码功能完成
目标：基于请求回来的 base64 图片，实现图形验证码功能
说明：
需求：
（3）api 接口模块 -封装图片验证码接口
目标：将请求封装成方法，统一存放到 api 模块，与页面分离
（4）Toast 轻提示
目标：阅读文档，掌握 toast 轻提示
（5）短信验证倒计时
目标：实现短信验证倒计时功能
步骤分析：
（6）登录功能
目标：封装api登录接口，实现登录功能
步骤分析：
（7）响应拦截器统一处理错误提示
目标：通过响应拦截器，统一处理接口的错误提示
（8）登录权证信息存储
目标：vuex 构建 user 模块存储登录权证 (token & userId)
补充说明：
（9）storage存储模块 - vuex 持久化处理
目标：封装 storage 存储模块，利用本地存储，进行 vuex 持久化处理
（10）添加请求 loading 效果
目标：统一在每次请求后台时，添加 loading 效果
背景：有时候因为网络原因，一次请求的结果可能需要一段时间后才能回来， 此时，需要
给用户 添加 loading 提示。
添加 loading 提示的好处：
实操步骤：
**10.**页面访问拦截
目标：基于全局前置守卫，进行页面访问拦截处理
说明：智慧商城项目，大部分页面，游客都可以直接访问, 如遇到需要登录才能进行的操作，提示并跳转到登录 但是：对于支付页，订单页等，必须是登录的用户才能访问的，游客不能进入该页面，需要做拦截处理
**11.**首页 - 静态结构准备 & 动态渲染
目标：实现首页静态结构，封装接口，完成首页动态渲染
**12.**搜索 - 历史记录管理
目标：构建搜索页的静态布局，完成历史记录的管理
**13.**搜索列表 - 静态布局 & 动态渲染
目标：实现搜索列表页静态结构，封装接口，完成搜索列表页的渲染
14.商品详情- 静态布局 & 渲染
目标：实现商品详情静态结构，封装接口，完成商品详情页渲染
**15.**加入购物车 - 唤起弹层
目标：点击加入购物车，唤起弹层效果
16.加入购物车 - 封装数字框组件
目标：封装弹层中的数字框组件
17.加入购物车 - 判断 token 添加登录提示
目标：给未登录的用户，添加登录提示
**18.**加入购物车 - 封装接口进行请求
目标：封装接口，进行加入购物车的请求
**19.**购物车模块
说明：购物车 数据联动关系 较多，且通常会封装一些 小组件， 所以为了便于维护，一般都会将购物车的数据基于 vuex 分模块管理
