vue百口桶网易严选,体验网易严选购物流程

线上接见:http://gettotally.com/yanxuan/#/

或许二维码扫描:

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

• 我的定单

• 定单的展现

先上线，后迭代

将来一个礼拜都邑天天更新功用，fixbug

总结

• 造出了滑动删除的轮子。

• 对状况治理有了进一步的相识,在项目过程当中每个组件都运用了footer这个组件，切换的时刻每次当前选中的选项都是第一项成选中状况，究其原因的他们的状况没有同享。

• 对组件的抽离，誊写可复用的组件。

• pages治理页面组件

• vuex状况分模块治理

• util东西的星散

• axios的封装

广告

2018届毕业生求职中

手艺栈：Vue + js + html + css + nodejs+ mongoDB + 微信小顺序

控制html5，css3，js（es5，es6）闇练运用bootstrap，weui，semantic-ui，jquery等框架举行开辟；闇练控制sass，stylus等CSS预处理器编写vue+vuex+vue-router，对MVVM开辟形式有肯定的明白，后续还会进修react，PWA，weex等手艺；相识node.js，mongodb相干学问，闇练运用express框架开辟；相识基础的数据结构与算法；
电话：17607080585 邮箱：1424254461@qq.com

目次

|
|—— 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

clone express文件夹

npm i & npm run dev 启动后端

前端部份:

# 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.