总结

基于Vue的商城
Vue+vuex+mint-ui+MUI

mint-ui： 基于vue的组件库 使用： npm import
MUI： 前端框架库 轻量：不依赖第三方js库 使用：github下载 import

路由改造
封装组件
vue-resource获取数据

App组件
Header
router-view
tabbar 点击切换组件 组件动画

Home组件
swipe轮播图 mint-ui
九宫格 mui grid-default.html

九宫格-新闻资讯列表 media-list组件 MUI
跳转新闻详情组件-详情组件中插入独立封装的评论组件
九宫格-图片分析 制作滑动条
跳转图片详情页面-缩略图vue-preview插件
九宫格-商品列表
经典两列布局-flex
商品详情页面 mui card.html布局
购买区域 mui组件 numbox.html
小球加入购物车和动画
number-box数据传递给父组件
vuex购物车-设计数据格式
点击加入购物车
购物车徽标数值的自动更新
本地存储

制作购物车页面 card
根据本地car中的id去后台去数据
设置numbox中的数量，从store中获取
numbox数据改变，同步到store中
实现购物车中的删除功能
绘制结算页面
将store中的状态同步到页面上去
同步页面的商品勾选状态到store中
实现勾选数量和总价的自动计算
实现返回按钮的功能

移动web商城

搜索框制作-- 主要是样式 两边定位，中间padding（宽度100%）
制作轮播图--

微金所网站页面 bootstrap

1.熟练运用bootstrap的栅格系统进行布局 .container .row col-md-2 hidden-sm hidden-xs
2.使用bootstrap中的插件

• 导航条组件
• carousel插件做轮播
• 媒体对象组件
• 标签页插件

项目
微金所网站：
技术栈：HTML+CSS+JS+Bootstrap
在该项目中，使用Bootstrap的栅格系统进行页面的布局，同时利用Bootstrap的组件和插件进行各模块的开发，包括navbar组件做导航条，carousel插件做轮播图，media组件做媒体对象，以及
标签页插件

Vue商城
技术栈：Vue+vuex+min-ui+MUI+webpack
在该项目中，使用mint-ui和MUI的组件封装所需独立组件
Home组件：包含一个mint-ui的swipe轮播图组件+九宫格导航，九宫格由MUI的grid-default组件完成
图片分享组件：包含滑动条和图片列表，滑动条由mui-slider组件完成
图片详情组件：标题+缩略图+独立的评论组件
商品列表组件，购物车组件等
使用vue-router监听组件之间的切换
使用vue-resource访问后台数据
使用vuex完成购物车和商品列表中数据的统一