vue2移动端电商项目,商城,仿蘑菇街(总结)

视频地址
笔记
code
主要内容:主页+详情页+购物车页面

主页

vue的初始化
目录结构
设置CSS初始化和全局样式:normalize.css /base.css
vue.config.js存储缩写样式
editorconfig 对代码风格进行统一
tabbar.navbar运用插槽进行封装,修改
anxios管理前后端数据,拦截器
新建home.js文件,用来封装首页的所有网络请求
轮播图封装首页展示
推荐信息,Vue的组件化概念
tabControl 选项框,如何高亮,以及匹配对应数据,滚动时有黏着效果
对于商品数据的处理:获取数据,数据分类,对于获取数据使其动态显示的逻辑
使获取的数据在vue中展示
样式商品一行两个均等分
BetterScroll使页面更流产滚动【未实现】
BetterTop滚到顶点(锚点作用)包括滚动途中显示和隐藏(视频用的是betterscroll,我用的是定时器)
完成上拉加载更多【未实现】
让Home不要随意销毁掉
点击实现页面跳转功能


详情页

导航栏的封装,和navbar类似方法
轮播图和数据从后端获取
数据整合,使用类Class商品信息的整合和展示
店铺信息展示同商品展示同理
详情页不显示tabBar
商品详情数据展示,商品参数的展示,商品评论信息的展示
时间格式化
滚动内容显示对应标题【未实现】
底部工具栏的封装,插槽


购物车

对于添加的商品的信息的获取,展示
将商品添加到store,添加展示的逻辑Vuex
对于store的抽取
mapGetters 辅助函数将 store 中的 getter 映射到局部计算属性
对于购物车中的信息的获取和展示
CheckBotton 是否勾选的样式逻辑
item选中与不选中的切换
底部工具的封装和使用,合计价格
全选按钮的状态显示和每一个勾选按钮之间的逻辑
mapActions映射
Toast封装(插件方法)
px2vw - css单位转化插件 适配移动端屏幕


(continuing...)

你可能感兴趣的:(前端)