Awesome
项目预览
<br> 线上访问:http://zhaoboy.bid/yanxuan/#/<br> 或者二维码扫描:
项目描述
vue全家桶模仿网易严选浏览,购物流程,好的生活,没那么贵。
技术栈
前后端分离,CORS解决跨域
前台
- vue 前端页面展示
- vue-router spa
- vuex 组件状态共享
- axios 异步请求
- es6 js新一代规范
- localStorage 个人信息的存储,购物车的存储
- Eslint 代码规范
- webpack build to dist
- iview 部分引入
后台
- Node(Express) mock后台数据
- leancloud 托管express
实现的功能
首页
- 图片轮播
- swiper滑块
- cell行组件
- 商品grid块组件
- tabbar切换
- 推荐,居家, 餐厨商品缩略信息的请求和展示
商品详情
- 商品大图滑动
- 参数,评论,名称,详情的请求展示
- 购买
- 加入购物车
专题
- 头部swiper滑块
- each-suggest 推荐组件
分类
- 复用,改造首页tabbar组件
- 请求每一分类数据
- 过渡效果
购物车
- 登陆状态的判断
- 全选,非全选的切换
- 购物车加入的过渡
- 滑动删除
- confirm框
- 下单形成订单
个人中心
- grid
- 我的订单
- 订单的展示
目录
|
|—— build
|—— config
|—— express/
| |—— app.js : 服务入口
| |—— routes/ : 后端路由.
| |—— ......
|
|——src : dev resources.
| |—— assets/
| | |____style/ 样式表
| | | |____reset.css
| | | |____others.css
| |—— components/
| | |____ public/ 公共组件
| | | |____ cell.vue 行
| | | |____ header.vue 头
| | | |____ goTop.vue
| | | |____ Footer.vue
| | | |____ others.vue 其它
| |—— fetch/
| | |____ api.js axios请求
| |—— pages/
| | |____ index/ 公共组件
| | | |____ others.vue vue组件
| | |____ mylist/ 我的订单
| | | |____ others.vue vue组件
| | |____ selfcenter/ 个人中心
| | | |____ others.vue vue组件
| | |____ shopcart/ 购物车
| | | |____ others.vue vue组件
| | |____ type/ 分类
| | | |____ others.vue vue组件
| | |____ other folder......
| | | |____ others.vue vue组件
| |—— router/
| | |____ index.js 路由映射
| |—— util/
| | |____ common.js util/localstorage
| |—— store/
| | |____ module/
| | | |____ user.js 个人状态管理
| | | |____ order.js 订单状态管理
| | | |____ footer.js.js 脚步菜单
| | | |____ shopCart.js 购物车状态
| | |____ store.js mainjs
| | |____ types.js typesz管理
| |—— App.vue :neteast-yanxuan SPA
| |__ main.js : the entry of douban-movieSPA
|
|__ static : static files
netease-yanxuan
netease yanxuan with vue2.0
Build Setup
可修改配置axios.defaults.baseURL<br> clone express文件夹<br> npm i & npm run dev 启动后端<br> 前端部分:<br>
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
For detailed explanation on how things work, checkout the guide and docs for vue-loader.