本项目是基于vue2最新实战项目,vue2 +vue-router2 + es6 +webpack 高仿饿了么app,是适合新手进阶的绝佳教程。
###首先
项目技术架构
- vue-cli
- vue
- vue-resource
- vue-router
- vue-infinite-scroll
- stylus
- webpack
###上图
- 加入购物车动画
- 弹出购物车 商品详情页
- 分类切换 图片左右滑动
###安装
项目地址:(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提出,我会在线解答。
顶
顶 我记得 饿了么有个 mint-ui 也有2.0的版本,我也不太习惯在项目里引入vuex,感觉,完成一个请求绕来绕去,很麻烦
顶
上面github地址错了,正确的是地址是: 项目github地址