济南黑马前端项目实战大纲

因目目前课程项目为 pc 端，但是大部分学生在找工作的时候会遇到利用 vue 开发移动端项目，所以学生无从下手，因此实战项目做移动端，并且移动端 ui 采用 vant 实现，这样也更好和小程序进行衔接

一 、项目前置

1、项目参考地址

项目链接地址：http://destiny001.gitee.io/projecttraining/#/home

2、项目技术选型

• vue --- 官网

• vue-router --- 官网

• vue-cli --- 官网

• vuex --- 官网

• axios --- 官网

• vant --- 官网

• less --- 官网

3、项目功能介绍

• 首页、新闻列表、新闻详情、图片列表、图片详情、商品列表、商品详情、图文介绍、商品评论、搜索、购物车列表

二、项目准备

• 利用脚手架搭建项目 - 创建好脚手架，传到 码云
• 按需导入 vant
• 抽离 vant 组件的引用
• 目前项目已完成初始化操作与 3-1 底部 tab 的开发，方便同学们分组进行开发

三、进入开发

1、底部 tab

• 利用 vant 组件搭建 Tabbar 标签栏
• 引入外部字体图标，利用插槽自定义 tabbar 图标

2、首页

• 利用 vant 中 Swipe 轮播实现轮播图结构
• 利用 vant 宫格组件实现九宫格

3、购物车

• 利用 vant 中 Card 商品卡片实现结构
• 利用 vant 中 PullRefresh 组件实现 下拉刷新
• 利用 SwipeCell 滑动单元格实现左滑出现删除
• 利用 vuex+本地存储实现购物车列表数据的存储和更新
• 利用 SubmitBar 提交订单栏实现提价的布局
• 实现购物车为空展示“购物车空空如也，并点击去逛逛进入商品列表”

4、商品列表

• 利用 vant 实现下拉刷新
• 利用 vant 实现上拉加载更多
• 利用 vant 实现图片懒加载

5、商品详情

• 轮播图组件的抽离
• 实现商品介绍和商品参数的布局
• 利用 vantStepper 步进器实现步进器功能
• 点击加入购物车将数据存储到 vuex
• 实现购物车徽章数量的同步

6、搜索

注意：搜索请求的接口为 “假搜索”，也就是不需要给接口传递 query，直接通过 get 请求获取所有的数据

• 利用 Search 搜索组件实现搜索的布局
• 如果没有搜索展示搜索历史页面
• 搜索之后展示搜索结果列表
• 搜索结果列表侧滑提示删除
• 利用 vantDialog 弹出框实现确认删除弹框
• 点击右上角添加可添加搜索结果

7、新闻资讯

• 利用商品卡片完成列表结构
• 利用 vant 组件插槽自定义内容
• 利用 vant 中 PullRefresh 组件实现 下拉刷新
• 实现时间的过滤

8、新闻详情

• 页面基本布局
• 实现评论组件的抽离
• 实现评论组件的功能
• 抽离评论组件

9、图片列表

• 利用 Tab 标签页实现顶部顶部导航的滑动效果
• 实现图片列表的布局
• 利用 image 的懒加载功能实现图片懒加载功能

10、图片详情

• 利用 ImagePreview 实现图片预览
• 实现评论组件的引用