# eleme
**Repository Path**: NightEmperor/eleme
## Basic Information
- **Project Name**: eleme
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-05-26
- **Last Updated**: 2020-12-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
> 本项目是基于vue2最新实战项目，vue2 +vue-router2 + es6 +webpack 高仿饿了么app,是适合新手进阶的绝佳教程。
### header
***
> * 行内元素的留白处理：第一种：父级元素设置font-size：0；第二种：行内标签链接在一起
> * 星级评价：0.5取整
```
itemClasses() {
let result = [];
let score = Math.floor(this.score * 2) / 2;
let hasDecimal = score % 1 !== 0;
let integer = Math.floor(score);
for (let i = 0; i < integer; i++) {
result.push(CLS_ON);
}
if (hasDecimal) {
result.push(CLS_HALF);
}
while (result.length < LENGTH) {
result.push(CLS_OFF);
}
return result;
}
```
> * 弹性盒子的计算：比如弹性盒子内有三个div,中间的盒子width：200px;margin:10px;
400-200-10*6=140px,其余两个div的宽度等分140px；每个div的宽度是70px;
详情页的title就是利用了该原理。
```
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: yellow;
margin: 10px;
}
.item1 {
-webkit-flex: 1;
flex: 1;
}
.item2 {
width:200px;
}
.item3 {
-webkit-flex: 1;
flex: 1;
}
```
> * sticky布局
### goods
> * 小球运动原理：
小球position：fixed;位于购物车，全部隐藏，当点击添加按钮时，触发事件increment，并传递点击事件源，
父级监听后，通过refs执行购物车的drop()函数，小球将显示，因为transition标签包裹，将执行beforeEnter Enter afterEnter
小球抛物线父级做X轴方向运动，小球做Y轴方向运动
```
抛物线
```
enter函数必须有这两条语句，否则，小球落到购物车时，不会消失
```
/* eslint-disable no-unused-vars */
let rf = el.offsetHeight;
```
beforeEnter函数执行时，没有过渡效果，立刻到达位置，不知道是什么原因
### 食品详情页food
* 隐藏在商品goods页面，当点击食物列表时展现,bottom 48px,购物车存在
```
.food
position fixed
left: 0
top: 0
bottom 48px
z-index 30
width 100%
background #ffffff
```
* 加载图片时，为了防止抖动，给图片加一个容器，通过padding-bottom，来实现高度
```
.image-header
position relative
width 100%
height 0
padding-top 100%
img
position absolute
top 0
width 100%
height 100%
```
* 返回按钮，用span标签，但是要设置display: block,padding:10px,增大点击区域
```
.back
position absolute
top 10px
left 0
.iconfont
display block
padding 10px
font-size 20px
color #ffffff
```
* 加入购物车按钮设置动画，因为小球的出发点根据事件源的位置决定的，如果没有动画，瞬间消息，不能计算小球抛出的位置
* 商品评价 全部 好评 吐槽
评价列表都会写出来，但是都有v-show条件，根据全部 好评 吐槽 等进行判断是否显示
### 项目技术架构
***
* vue-cli
* vue
* vue-resource
* vue-router
* vue-infinite-scroll
* stylus
* webpack
###上图
***
* 加入购物车动画
* 弹出购物车 商品详情页
* 分类切换 图片左右滑动
###安装
***
项目地址：（`git clone`）
```shell
git clone https://github.com/liangxiaojuan/eleme.git
```
通过`npm`安装本地服务第三方依赖模块(需要已安装[Node.js](https://nodejs.org/))
```
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
```
###目录结构
***
├── build // 构建服务和webpack配置
├── config // 项目不同环境的配置
├── dist // 项目build目录
├── index.html // 项目入口文件
├── package.json // 项目配置文件
├── src // 生产目录
│ ├── assets // 图片资源
│ ├── common // 公共的css js 资源
│ ├── components // 各种组件
│ ├── App.vue // 主页面
│ └── main.js // Webpack 预编译入口