crystal5200/weinihaigou

单页面-海淘商城（Vue版）

weinihaigou

单页面 海淘商城

前言

初学vue时曾在网上搜索vue的实战项目源码，无奈大部分都是简单的demo，对于深究vue没有太大的帮助，剩下的一些大部分都是像音乐播放器之类的展示型项目，交互没有预期那么复杂。但我们实际在工作中，经常会遇到有购物车的项目，这类项目因为涉及到money，所以对逻辑严谨度要求高，页面之间交互复杂，又会伴随着登录、注册、用户信息等等，常常会让我们很头疼。

此项目大大小小共 16 个主体页面，涉及注册、登录、商品详情、购物车、下单、订单、订单详情等等，是一个完整的流程。一般公司即便是官网的单页面项目都没这么复杂，如果这个项目能驾驭的了，相信大部分公司的其他单页面应用也就不在话下，即便更复杂，也不会比这个高到哪里去。

注：此项目纯属个人瞎搞，正常购买请选择唯妮海购官网。

技术栈

vue2 + vue-cli + vuex + vue-router + webpack + ES6/7

关于 数据接口 的说明

该项目所有接口都来自唯妮海购，如有侵权，请联系本胖。马上删除。（商品详情接口最近有很大的变动，故商品详情页的逻辑有一部分是不对的，等新的商品详情接口上线，本胖马上改哈）。

项目运行

git clone https://github.com/lvpangpang/weinihaigou.git 

cd weinihaigou

npm install

npm run dev 

如果你用过npm run build 打包出来dist文件夹，想运行里面的index.html,可以安装下面的指令来(注意需要修改api.js里面的const pxy = '/api' 改成const pxy = '';)
npm install http-server
cd dist
http-server -P http://www.weinihaigou.com/

或者本地开一个nginx，配置nginx.conf就行

说明

如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！ ^_^

或者您可以 "follow" 一下，我会不断开源更多的有趣的项目

如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR 👍

 如果您不想注册的可以直接用这个账户 用户名 15757135989 密码 123456

吕胖胖的博客 http://www.qdfuns.com/house/15098.html

目标功能

• 登录、注册 -- 完成
• 首页 -- 完成
• 分类 -- 完成
• 搜索 -- 完成
• 搜索结果以及筛选 -- 完成
• 购物车功能 -- 完成
• 商品详情页 -- 完成
• 商家详情页 -- 完成
• 登录、注册 -- 完成
• 个人中心 -- 完成
• 下单功能 -- 完成
• 订单列表 -- 完成
• 订单详情 -- 完成
• 添加、删除、修改收货地址 -- 完成
• 付款 -- 不过最好不要在这里付款哈

部分截图

该个人项目目前在重构中。。。预计10月份完成(已完成重构 地址 https://github.com/lvpangpang/weinihaigou-better)