vue-eleme

本项目是基于vue2最新实战项目，vue2 +vue-router2 + es6 +webpack 高仿饿了么app,是适合新手进阶的绝佳教程。

首先

喜欢的请点心，关注，star ,fork,这些是我坚持下去的动力

demo地址 demo （请用chrome的手机模式预览）
*本项目地址github地址

我的另外一个vue开源项目 Meizi 用了vuex，和其他比较火的包，才刚刚上传，代码更加简单，设计更加简洁，注释更加多！喜欢vue的朋友赶紧去看看。

手机扫一扫

1484297893.png

项目技术架构

vue-cli
vue
vue-resource
vue-router
vue-infinite-scroll
stylus
webpack

上图

加入购物车动画

11.gif

弹出购物车商品详情页

2222.gif

分类切换图片左右滑动

3333.gif

安装

项目地址：（git clone）

git clone https://github.com/liangxiaojuan/eleme.git

通过npm安装本地服务第三方依赖模块(需要已安装Node.js)

npm install

启动服务(http://localhost:8080)

npm run dev

发布代码

npm run build

安装注意

安装 vue-cli

npm install -g vue-cli

安装 vue-cli eslint

npm install -g eslint

安装依赖 friendly-errors-webpack-plugin

npm install friendly-errors-webpack-plugin --save-dev

目录结构

<pre>
├── build // 构建服务和webpack配置
├── config // 项目不同环境的配置
├── dist // 项目build目录
├── index.html // 项目入口文件
├── package.json // 项目配置文件
├── src // 生产目录
│ ├── assets // 图片资源
│ ├── common // 公共的css js 资源
│ ├── components // 各种组件
│ ├── App.vue // 主页面
│ └── main.js // Webpack 预编译入口
</pre>

实现的功能

商品滚动，商品滚轮滚动
商品联动
加入购物车，移除购物车
显示评论评论筛选
图片左右滑动
商品详情父子组件的通信
等等

正在实现的功能

vuex
无限滚动
上拉刷新
更多更精彩的内容

最后

我的另外一个vue开源项目 Meizi 用了vuex，和其他比较火的包，才刚刚上传，代码更加简单，设计更加简洁，注释更加多！喜欢vue的朋友赶紧去看看。
如果喜欢一定要 star哈!!!（谢谢!!）
如果有意见和问题请在 lssues提出，我会在线解答。

用vue2 +vue-router2 + es6 +webpack 高仿饿了么app（干货满满)