Vue.js制作河马生鲜app

来自锐亚教育知识库
跳到导航 跳到搜索


目录

导学

0.1 课程介绍及项目演示讲解

第一章 搭建开发环境

1.1 安装Node.js
1.2 安装 Visual Studio Code
1.3 安装Vue
1.4 使用脚手架创建Vue项目
1.5项目目录结构讲解
1.6 快速生成Vue组件模板

第二章:首页开发

2.1底部导航

2.1.1 底部导航需求分析
2.1.2 底部导航界面布局
2.1.3 如何寻找好看的按钮icon
2.1.4 美化底部导航
2.1.5点击按钮-切换按钮显示状态
2.1.6 点击按钮-实现页面跳转

2.2 顶部搜索区

2.2.1 搜索区需求分析
2.2.2 搜索区界面布局
2.2.3 搜索区动态缩放-算法讲解
2.2.4 鼠标滚轮事件-实现搜索区动态缩放
2.2.5 独立搜索页面
2.2.5.1 独立搜索页面需求分析
2.2.5.2 独立搜索页面布局
2.2.5.3 美化独立搜索页面
2.2.5.4 Vue如何与服务端API交互
2.2.5.5 API讲解:搜索API
2.2.5.6 实现搜索逻辑-关键字搜索
2.2.5.7 实现搜索逻辑-展示搜索到的商品列表

2.3 轮播图组件

2.3.1 在项目中引入vue-awosome-swiper插件
2.3.2 API讲解:轮播图API及后台配置
2.3.2 实现轮播图组件
2.4 封装axios通用方法
2.5 实现中部菜单栏组件

2.6 超盒算

2.6.1 超盒算需求分析
2.6.2 超盒算界面布局
2.6.3 API讲解:超盒算API及后台配置
2.6.4 实现超盒算
2.6.5 超盒算界面美化

2.7 商品分类选项卡

2.7.1 商品分类选项卡需求分析
2.7.2 商品分类选项卡界面布局
2.7.3 商品展示之经典布局
2.7.4 实现选项卡动态组件
2.7.5 美化商品分类选项卡界面

2.8 自定义选项卡之精选组件

2.9 推荐商品

2.9.1 推荐商品需求分析
2.9.2 推荐商品之两列布局
2.9.3 API讲解:推荐商品API及后台配置
2.9.4 实现推荐商品界面展示
2.9.5 美化推荐商品界面

第三章:商品分类模块

3.1 商品分类模块需求分析

3.2 商品分类模块界面布局

3.3 实现头部组件

3.4 左侧分类菜单

3.4.1 左侧分类菜单布局

3.4.2 API讲解:分类菜单API及后台配置

3.4.3 实现分类菜单展示

3.4.4 美化分类菜单

3.5 右侧商品列表

3.5.1 右侧商品列表区布局

3.5.2 API讲解:分类商品列表API及后台配置

3.5.3 实现商品列表展示

3.5.4实现筛选按钮与商品列表联动展示

3.6 实现分类菜单与商品列表联动展示

3.7 美化商品列表区

作业:盒区生活页面

第四章:登录模块开发

4.1 登录模块需求分析

4.2 实现登录首页

4.3 注册页面

4.3.1 注册页面布局

4.3.2 API讲解:注册API

4.4 注册之短信验证

4.4.1阿里云平台申请短信服务

4.4.2后台配置阿里云短信接入

4.4.3后台配置阿里云短信接入

4.4.4API讲解:手机验证码注册API

4.4.5实现手机验证码注册功能

4.5 用户名密码登录页

4.5.1 用户名密码登录页布局

4.5.2 API讲解:用户名密码登陆API

4.5.3 实现账号登录功能并获取token

4.5.6 实现token的全局使用

4.5.7 校验账号登录状态

第五章:购物车模块开发

5.1 购物车需求分析

5.2 商品详情页

5.2.1 商品详情页布局

5.2.2 API讲解:商品详情API及后台配置

5.2.3 实现商品详情页面

5.2.4 美化商品详情页面

5.2.5 加入购物车

5.2.5.1 API讲解:加入购物车

5.2.5.2 实现加入购物车功能

5.2.5.3 API讲解:购物车数量

5.2.5.4 实现购物车数量小红点

5.2.6商品评价

5.2.6.1实现商品评价结构

5.2.6.2 API讲解:商品评价内容

5.2.6.3 完善商品评价界面

5.3 实现购物车初始页面

5.4 购物车列表展示页面

5.4.1 购物车列表布局

5.4.2 API讲解:购物车列表API

5.4.3实现购物车列表展示

5.4.4 美化购物车商品展示

5.4.5 实现设置购买数量

5.4.6 实现单选、多选和全选

5.4.7 实现删除功能

第六章:订单模块

6.1 订单模块需求分析

6.2 订单页面布局

6.3 美化订单页面

6.4支付方式

6.4.1 支付方式区域布局

6.4.2 API讲解:支付方式

6.4.3 实现支付方式展示

6.5 收货地址

6.5.1 收货地址需求分析

6.5.2 收货地址页面布局

6.5.3 API讲解:增加收货地址API

6.5.4 实现收货地址的增加

6.5.5 API讲解:设置默认收货地址API

6.5.6 实现设置默认收货地址

6.6 合计

6.6.1 合计界面布局

6.6.2 实现合计展示

6.7 立即结算

6.8.1 微信支付

6.8.1.1 微信平台申请开通支付权限

6.8.1.2 项目后台配置微信支付接入

6.8.1.3 前端引入微信支付SDK

6.8.1.4 实现订单使用微信支付

6.8.2 支付宝支付

6.8.2.1 支付宝平台申请开通支付权限

6.8.2.2 项目后台配置支付宝支付接入

6.8.2.3 前端引入支付宝支付SDK

6.8.2.4 实现订单使用支付宝支付

第七章:我的界面开发

7.1我的模块需求分析

7.2我的模块组件划分

7.3顶部余额优惠

7.3.1顶部余额优惠布局

7.3.2API讲解:余额优惠

7.3.3美化余额优惠

7.4我的订单

7.5 待付款 ??????????

7.6会员优惠

7.6.1会员优惠布局

7.6.2API讲解:会员优惠API及后台配置

7.6.3实现会员优惠

作业:猜你喜欢组件

第八章:界面自适应

8.1 自适应需求分析

8.2 界面自适应的实现思路

8.3 实现首页自适应

8.4 实现商品分类模块自适应

8.5 实现登录模块自适应

8.6 实现购物车模块自适应

8.7 实现订单模块自适应

8.8实现我的界面自适应

第九章:项目打包上线

9.1 Vue项目打包-H5

9.2 Vue项目打包-Android

9.3 Vue项目打包-IOS

9.4 阿里云后台开通ECS

9.5 阿里云服务器配置项目运行环境

9.5.1 安装宝塔

9.5.2 配置网站

9.6 发布H5到阿里云服务器

9.7 阿里云配置域名解析

9.8 阿里云后台开通OSS云存储

9.9阿里云申请免费SSL证书

9.10 将站点配置为HTTPS访问