https://github.com/jerryygh/m-eleme

饿了么移动端单页应用
https://github.com/jerryygh/m-eleme

javascript vue vue-cli vue-resource vue-router2 vue2 webpack2

Last synced: 1 day ago
JSON representation

饿了么移动端单页应用

• Host: GitHub
• URL: https://github.com/jerryygh/m-eleme
• Owner: JerryYgh
• Created: 2017-04-10T14:52:26.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-04-17T10:02:09.000Z (over 7 years ago)
• Last Synced: 2024-09-23T20:02:01.476Z (2 days ago)
• Topics: javascript, vue, vue-cli, vue-resource, vue-router2, vue2, webpack2
• Language: Vue
• Size: 26.7 MB
• Stars: 119
• Watchers: 6
• Forks: 55
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

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

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

> 项目github地址：[m-eleme](https://github.com/JerryYgh/m-eleme)

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

##  项目截图

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

![eleme.gif](./resource/eleme.gif)

##  项目运行

```bash

# 克隆项目到本地

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