Vue_app

vue实现的项目,用到了mint-ui和mui两种框架,帮助快速完成页面视图效果

运行方式

1. npm install
2. npm run dev (端口是8080,如有冲突,请自行修改端口号)

制作App.vue组件

1. 完成了header部分,用的是mint-ui中的header组件
2. 完成了Tabbar部分,用的是mui中的底部选项卡,稍微改一下样式
3. 放置一个 router-view 来展示路由匹配到的组件
4. 点击 tabbar 中的路由链接，展示对应的路由组件

制作home组件

1. 完成了swiper轮播图部分,由于接收不到后台图片,(才暂时随便用的图代替)
2. 完成九宫格部分, 用的是mui中的9宫格

制作 新闻模块

1. 制作了新闻列表,主要是渲染数据
2. 制作了新闻详情
3. 评论部分做了个公共的组件,之后也有页面需要评论功能components/comment.vue

制作 图片分享模块

1. 制作图片的分类,用到mui的组件,为了实现可以滑动的功能
2. 制作图片的懒加载,用到mint-ui的懒加载
3. 制作图片详情,也用到了评论的组件
4. 制作图片详情中的图片预览功能,下载的插件vue2-preview实现的

制作 商品购买模块

1. 制作商品列表的渲染
2. 制作商品详情静态渲染
3. 制作商品详情中的图文介绍页面渲染
4. 制作商品详情中的评论页面渲染
5. 制作加入购物车的小球半场动画
6. 制作加入购物车商品数量同步到徽标上
   • 用到了Vuex中的Store
   • 把得到的商品信息放到localStorage中储存