关于前端:vue2移动端电商项目商城仿蘑菇街总结

48次阅读

共计 790 个字符,预计需要花费 2 分钟才能阅读完成。

视频地址
笔记
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…)

正文完
 0