johnson888 / weinihaigou-better Goto Github PK

View Code? Open in Web Editor NEW

This project forked from lvpangpang/weinihaigou-better

0.0 2.0 0.0 1.05 MB

单页面-海淘商城（重构版）

JavaScript 55.87% HTML 0.07% Vue 43.26% CSS 0.80%

weinihaigou-better's Introduction

weinihaigou-better

单页面海淘商城(优化版)

前言

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

主要优化点

1.APP.vue中新增了,等基础组件，显示隐藏flag都放state里面，这样的好处就是不会让人感觉其实是多页面切换哈（本胖描述的就是这么朴素）。
2.需要登录权限的组件的跳转判断由之前在每个组件里面判断统一放到main.js，通过router.beforeEach统一控制，不过要注意的是vue的初始化都要在获取用户权限的回调里，具体实现代码可以看main.js。
3.将很多组件都要用到的axios以及API挂载到Vue.prototype，这样就不用再每个需要使用的组件中再去import。
4.还有一些就是将之前有部分地方用到jq的都改成了数据驱动。
5.用了keep-alive缓存部分组件

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

技术栈

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

关于数据接口的说明

该项目所有接口都来自唯妮海购，如有侵权，请联系本胖。马上删除。

项目运行

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

cd weinihaigou-better

npm install
有时候安装依赖后会报错  [email protected] install 'node install.js'，没关系，也是跑的起来的哈，应该是node版本问题

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就行