Vue2.0 实战之饿了么移动端SPA(学习)

Eleme (饿了么移动端SPA)

  • 概述:
    非常感谢黄毅老师录制的实战视频,给刚入门Vue的人提供了很好的Vue进阶教程。
    该实战项目使用Vue2.0开发。
    Github地址: Eleme SPA

  • 技术架构:

    • Vue 2.0
    • Vue-router 2
    • Vue-cli
    • Axios
    • Better-scroll
    • ES6
    • Webpack 2
    • Eslint
    • Sass
  • 项目截图

    Vue2.0 实战之饿了么移动端SPA(学习)_第1张图片
    goods page

    Vue2.0 实战之饿了么移动端SPA(学习)_第2张图片
    detail page
    Vue2.0 实战之饿了么移动端SPA(学习)_第3张图片
    shopcart
    Vue2.0 实战之饿了么移动端SPA(学习)_第4张图片
    ratings page
    Vue2.0 实战之饿了么移动端SPA(学习)_第5张图片
    seller page
  • 功能:

    • 模拟原生App滑动
    • 商品联动
    • 商品加入购物车
    • 图片左右滑动
    • 小球飞入动画
    • 评论筛选
    • 等等
  • 安装:

  • github:

 git clone https://github.com/Eval0day7/StudyEleme.git

  • npm:
 npm install 

 npm run dev    
  • 总结:
    • 了解了项目开发整个流程。
    • 设计稿高度还原移动端页面。
    • 模块化、组件化开发。
    • css sticky footer 经典布局。
    • 明白了设备像素比、移动端1px问题。
    • Eslint 代码规范检测工具,明白了ES6代码规范。
    • 熟悉了Webpack打包工具。
      Ps: 总之这次实战收获匪浅,加深了对Vue开发知识理解,是个很好体验过程,成就感十足。由于实战视频使用的是Vue 1.0,在开发过程也碰到了许多问题。不过还好都已经解决了。

你可能感兴趣的:(Vue2.0 实战之饿了么移动端SPA(学习))