vue.js2.0 (简易)水果商城

开发初衷：一直在学习vue.js,之前学习构建工具搭建的项目都是从github下载的，学习着就想自己通过vue-cli搭建一个简易的水果商城项目.该项目系本人首次发布于github，有诸多问题需要修正，目前项目还会继续更新，还请各位大神多多指点，轻喷，谢谢了。项目比较简单，适合新手学习项目布局，一些简单的数据交互，如果觉得能通过项目学到一点东西，麻烦再github上给个star,先在这里谢过了。

github地址

项目结构：

组件结构：

需求分析： 提示：本项目中调用本地json数据后，数据都会被存到localstorage中，减少多次接口调用

1.实现各种水果产品的展示 home.vue

  请求statci/fruit.json获取所有数据，fruit.json包含水果数据、收货地址列表数据、水果文章数据.
  将fruitData与addressList存入localstorage。
复制代码

2.点击水果产品进入对应的详情页 Detail.vue

  此组件旨在渲染对应水果的具体数据：轮播图、价格、名称、介绍，对水果的数量进行修改。
  并且可以将水果添加到购物车，也可以直接进行结算。
复制代码

3.如果在详情页直接点击结算，则直接跳转到结算页面

  如果点击购物车，则进入购物车组件，在购物车组件可以修改水果购买数量以及选择结算那些水果。
  购物车组件 Car.vue
  结算组件 Pay.vue PaySuccess.vue
复制代码

4.进入结算页面后 可以设置发票抬头、支付方式、留言信息。

5.结算成功后进入PaySuccess.vue 在支付成功页可以进入订单详情页面和订单列表页面

  Order.vue 订单列表 OrderDetail.vue 订单详情
复制代码

6. 个人中心My.vue

   我的收藏 Collection.vue
   我的收货地址：（列表）AddressList.vue   （新增编辑）AddressEdit.vue
复制代码

7.水果相关文章

   文章详情：Article.vue
   文章详情：ArticleDetail.vue
复制代码

8.文章和水果都有收藏功能，收藏成功后可以在个人中心的我的收藏里面看到

项目页面截图：

vuex: index.js

state.js

action.js

type.js

mutations

总结：该项目开发的初衷是熟悉vuex以及练习商城vant-ui框架。本项目是参考github一个vivo商城项目，地址为https://github.com/Mynameisfwk/vivo-shop 参考该项目思路，在这里对原作者表示感谢。 数据图片来源于中国水果网，再次表示感谢，侵权联系便删。

github地址

有任何问题意见建议可以在https://github.com/dabaoRain/vueFruitShop/issues这里给我留言，大家一起分享学习讨论。如果觉得能通过项目学到一点东西，麻烦再github上给个star,先在这里谢过了。

技术参考网站：http://jspang.com/ vue官网

技术栈：vue全家桶 vue+vuex+vue-router+axios+vant-ui+localstorage+sass

相关链接：van-ui官网 https://youzan.github.io/vant/

转载于:https://juejin.im/post/5b4feb1d6fb9a04f9e230ae5