Awesome

m-eleme(饿了么移动端单页应用)

这是一个基于Vue全家桶实现的饿了么移动端webapp

项目github地址：m-eleme

如果觉得对您有帮助，您可以在右上角给我个star支持一下，谢谢！

项目截图

注：动图很卡，是因为截图文件很大，动图里的图片模糊，是截图软件的锅，谅解下，项目实际运行都不存在这些问题的。

项目运行

# 克隆项目到本地
git clone https://github.com/JerryYgh/m-eleme.git

#  安装依赖
npm install

# 本地开发，开启服务器，浏览器访问http://localhost:8080
npm run dev

#  构建生产
npm run build

项目说明

用到的技术栈

vue2 + vue-router2 + webpack2 + vue-cli2 + vue-resource + stylus + flex + eslint

主要功能说明

• resource文件里有UI原稿psd，切好的图，及标注文件。
• 基于vue2.0
• 使用vue-cli2脚手架搭建项目
• 使用webpack2打包项目文件
• 使用vue-router2实现路由切换
• 使用vue-resource进行数据请求
• stylus编写样式
• flex弹性布局
• eslint进行es6代码检查
• 联动滚动借助了better-scroll插件
• localStorage实现本地存储

学习参考

• vue2.0官网： https://vuefe.cn/v2/guide/
• webpack1免费视频课程，戳这里：http://www.imooc.com/learn/802
• webpack1向webpack2升级：https://webpack.js.org/guides/migrating/
• better-scroll插件使用：https://github.com/ustbhuangyi/better-scroll
• stylus： http://www.zhangxinxu.com/jq/stylus/
• ES6: http://es6.ruanyifeng.com/
• Sticky footers http://www.w3cplus.com/css3/css-secrets/sticky-footers.html
• Flex弹性布局: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
• localStorage本地存储: http://www.cnblogs.com/st-leslie/p/5617130.html
• 最后：本项目有付费视频课程，戳这里：http://coding.imooc.com/class/74.html