Vue项目-商城
Vue商城项目
结构分析：
固定的头部： mint-ui组件库的Header组件
切换的组件： 放置一个router-view来展示路由匹配到的组件
固定的底部： MUI框架的代码片断 tabbar
制作tabbar中的图标
- 图标的类名在icon.thml和icons-extra.html中查找
- 使用icons-extra.html中的图标时要引入对应的字体文件和样式文件
将tabbar中的链接改造成路由链接，并设置高亮
- 导入路由
- 注册路由
- 新建路由js文件
- 引入路由文件
- 挂载路由
- 设置路由的高亮类
完成tabbar中的路由组件切换
- 新建需要的组件
- 路由js文件中引入组件
- 配置路由路径
- 新建一个坑放置路由监听到的组件
制作Home组件中的轮播图 mint-ui的swipe组件（注意手动设置高度）
获取轮播图的数据，使用vue-resource访问后台，获取数据
this.$http.get获取
获取到的数据，保存到data
v-for渲染每个item项
改造九宫格区域的样式-使用mui组件grid-default
src="[object Module]"的解决方法（https://blog.csdn.net/simper_boy/article/details/103455444）
根路由重定向
组件切换时的动画效果
问题：
头尾滚动条 解决:app overflow-x
右进右出 解决：v-enter v-leave-to 分开
切换的组件一上一下 解决： v-leave-to 加定位
新闻资讯路由改造
新闻资讯列表制作
1.绘制页面 使用mui框架的media-list组件
2.使用$.http.get获取数据
3.渲染页面
新闻资讯列表底部处理和时间处理
新闻列表跳转到新闻详情
标签改为router-link
设置路径 带id
新建新闻详情组件
配置路由链接
新闻详情页面制作
制作评论子组件并绘制
先单独制作评论子组件 再导入到需要的组件中
获取评论内容
点击加载更多按钮，获取更多评论
1.为按钮绑定事件，在事件中请求下一页数据
2.为了防止新数据覆盖老数据，老数据要拼接新数据
发表评论功能
1.textarea数据双向绑定
2.按钮绑定事件
3.判定数据不能为空 将数据插入到数组前面
改造图片分享按钮为路由链接 并显示对应的组件页面
绘制图片列表页面
1.制作顶部滑动条
2.制作底部图片列表
制作滑动条的坑
1.借助MUI的tab-top-webview-main.html
2.去除全屏类
3.无法滑动 需要初始化 必须在mounted后初始化 此时dom元素可操作
4.tabbar无法点击 tabbar中的mui-tab-item类冲突 将这个类改名字 重置样式
5.获取所有分类 渲染分类列表
制作底部图片列表
1.使用mint-ui的懒加载技术
2.导入懒加载模块
3.获取数据渲染图片列表
4.制作图片列表样式
5.提高APP中 header的优先级 房子覆盖
点击图片，跳转到图片详情页面，使用tag属性指定样式
制作图片详情组件
制作结构
获取数据
加入评论子组件
制作缩略图 使用vue-preview插件
制作商品列表
商品列表路由改造
实现商品列表的两列布局 使用flex布局
手机调试 处于同一wifi --host ip地址 手机访问这个地址
获取数据
获取下一页数据
制作商品详情页面
路由改造（编程式路由） this.$router.push({ name: \'goodinfo\', params: { id }});
绘制页面 mui card.html
获取商品详情轮播图数据
将之前用到的轮播图独立成一个单独的组件，再使用
解决轮播图图片宽度是自适应还是100%的问题 （ifsull是个布尔值 full是定义的样式类）
绘制商品购买区域 使用mui组件 numbox.html
绘制商品参数区域 并获取数据
制作图文介绍页面和商品评论页面并使用编程式路由
获取图文介绍页面和商品评论页面的数据
实现基本的加入购物车小球并完成动画
解决小球动画的距离问题 translate的距离不能写死（解决方法 徽标距离顶部的距离减去小球初始距离顶部的距离） el.style.transform = translate(${xDist}px,${yDist}px);
将number-box中的数字传递给父组件（GoodInfo.vue）
通过JS API的方式设置number-box的最大值
启用vuex并设计购物车的数据结构
实现点击加入购物车
实现徽标数值的自动更新 使用getters 类似于计算属性 作为属性调用 而不是方法
实现购物车商品的本地持久存储
绘制购物车页面中商品列表的布局
获取购物车中所有商品列表的数据（根据本地存储的car中的id去访问后台，获取相应的照片，标题等数据来渲染购物车组件）
渲染购物车商品列表中的商品数量
购物车商品数量改变同步到store中
实现购物车中的删除功能
绘制结算页面
将store中的状态同步到页面上去
同步页面的商品勾选状态到store中
实现勾选数量和总价的自动计算
实现返回按钮的功能
vuex的概念
- vuex是为了数据共享而存在的 props(父子组件之间传递的数据) data(组件私有数据) vuex(组件之间需要共享的数据)
vuex的使用
- 下载 npm i vuex -S
- 导入 安装
- new一个实例对象
- 实例对象挂载到vm实例上，其他组件就可以访问了，访问方法是this.$store.state.***
操作vuex中的数据
- 不推荐在组件中直接操作数据，而是通过调用mutation中的方法来操作数据
- mutation中方法的调用方： this.$store.commit(\'方法名\')
获取vuex中的数据
- 使用getters
以上是 Vue项目-商城 的全部内容， 来源链接： utcz.com/z/379373.html
