vue2.0仿饿了么webAPP项目

# webapp vue2.x仿饿了么app项目总结

项目地址：https://github.com/harrietjia/vue2-webapp.git

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

部分截图：

## 实现功能：
```
• Goods、Ratings、Seller组件视图均可上下滚动
• 商品页点击左侧menu，右侧list对应跳转到相应位置
• 点击list查看商品详情页，父子组件的通信
• 评论内容够可以筛选查看
• 购物车组件，包括添加删除商品及动效，购物控件与购物车组件之间非父子组件通信，点击购物车图标，展示选择的商品列表
• 商家实景图片可以左右滑动
• loaclStorage缓存商家信息（id、name）
```
## 项目结构分析：

common/---- 文件夹存放的是通用的js,css和fonts
components/----文件夹用来存放我们的 Vue 组件
build/----文件是 webpack 的打包编译配置文件
config/----文件夹存放的是一些配置项，比如我们服务器访问的端口配置等
dist/----该文件夹一开始是不存在，在我们的项目经过 build 之后才会产出
prod.server.js----该文件是测试是模拟的服务器配置，用来运行dist里面的文件，在config/index.js中,build对象中添加一条端口设置port：9000，
App.vue----根组件，所有的子组件都将在这里被引用，eventHub空实例是用来组件间通信的中央数据总线作用，主要连接购买控件和购物车组件之间的数据通信
index.html----整个项目的入口文件，将会引用我们的根组件 App.vue
main.js----入口文件的 js 逻辑，在 webpack 打包之后将被注入到 index.html 中

## 各组件之间的关系：
```
├──APP.vue
│ ├──Header.vue--头部组件
│ │ ├──star.vue--星星评分组件
│ ├──goods.vue--商品组件
│ │ ├──shopcart.vue--购物车组件,包括小球飞入购物车动画,使用this.\$root.$on('cart.add', this.drop)接收，并给drop方法使用,这里特别说明`$root`，官方解释：表示当前组建树的根实例，如果根实例没有父实例，次实例将会是自己
│ │ ├──cartcontrol.vue--购买控件--选中数量返回给父组件goods，goods响应后，重新计算选中数量，并用this.\$root.$emit（'name',event.target）将数据发送给购物车组件，
│ │ ├──food.vue--商品详情页
│ │ │ ├──ratingselect.vue--评价内容筛选组件
│ ├──ratings.vue--评论组件
│ │ ├──ratingselect.vue--评价内容筛选组件
│ ├──seller.vue--商家组件

独立组件
├──split.vue--关于分割线组件
├──ratingselect.vue--评价内容筛选组件
```
## 开发过程问题和技巧汇总：

### 1、分开设置css样式：
图标icon.css--文字图标样式，通过icommon.io网站将svg图片转成文字图标样式
公共base.css--处理设备像素比的一些样式,针对1px border的实现：主要是利用伪类和通过设置class针对DPR的一个y轴的缩放
工具mixin.css--设置border-1px样式和背景样式
css书写规范: 1、先设置布局 (display,position)
2、设置宽高 (触发重绘的)
3、设置字体、颜色 (可被继承的)

### 2、sticky-footer布局
header组件的详情页采用sticky-footer布局，主要特点是如果内容不够长，页脚部分也会贴在视窗底部，内容足够长，就会将页脚推到内容底部，父级position:fixed,内容设为padding-bottom:64px，页脚相对定位，margin-top:-64px

### 3、要求宽度自适应的布局，
采用flex布局,父级display:fixed,子元素flex:放大倍数，缩小倍数，基准值

### 4、transition过渡

在购买控件中使用transition过渡效果，实现添加减少按钮的动效，和小球飞入购物车的动效（模仿贝塞尔曲线的效果）

vue2.x里面定义了transition过渡状态，
name - string, 用于自动生成 CSS 过渡类名。

例如：name: 'fade' 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为 "v"

fade-enter
fade-enter-active
fade-leave
fade-leave-active

例子：<transition name="fade"></transition>

opacity: 1
background: rgba(7, 17, 27, .8)
&.fade-enter-active, &.fade-leave-active
transition: all .5s
&.fade-enter, &.fade-leave-active
opacity: 0
background: rgba(7, 17, 27, 0)

包括transition过渡的钩子函数

before-enter
before-leave
before-appear
enter
leave
appear
after-enter
after-leave
after-appear
enter-cancelled
leave-cancelled (v-show only)
appear-cancelled

### 5、seller组件：

#### 问题一：seller页面中商品商家实景图片横向滚动
解决方案：每个li要display：inline-block，因为width不会自动撑开父级ul，所以需要计算ul的width，**（每一张图片的width+margin）*图片数量-一个margin**，因为最后一张图片没有margin
同时new BScroll里面要设置`scrollX: true,eventPassthrough: 'vertical',// 滚动方向横向`

#### 问题二：打开seller页面，无法滚动
问题分析：出现这种现象是因为better-scroll插件是严格基于DOM的，数据是采用异步传输的，页面刚打开，DOM并没有被渲染，所以，要确保DOM渲染了，才能使用better-scroll，
解决方案：用到`mounted`钩子函数，同时搭配`this.$nextTick()`

#### 问题三：在seller页面，刷新后，无法滚动
问题分析：出现这种情况是因为mounted函数在整个生命周期中只会只行一次
解决方案：使用watch方法监控数据变化，并执行滚动函数 `this._initScroll();this._initPicScroll();`

### 6、goods,ratings,seller组件之间切换时会重新渲染
解决方案：在app.vue内使用`keep-alive`，保留各组件状态，避免重新渲染

```
<keep-alive>
<router-view :seller="seller"></router-view>
</keep-alive>
```

### 7、food页面中图片的设置
pading-top设置为100%时，会根据宽度来计算padding，所以width:100%; height: 0;padding-top: 100%会是一个正方形的盒子

### 8、better-scroll的设置
better-scroll依赖于文档，所以最好在mounted中对其进行初始化
在初始时要对文档中的内容进行引用，最好放在vue.$nextTick()中进行，这样可以保证该引用已经存在于文档流中

## 总结

将相同样式或功能的区块单独提出来，作为一个组件。

另外组件中用到的图片等资源就近维护，即可以考虑在组件文件夹中新建images文件夹。

抽离组件遵循原则：
*要尽量遵循单一职责原则，复用性更高，不要设置额外的margin等影响布局的东西*

### -css预处理器--stylus
全局安装，安装之前你需要你安装 nodejs

$ npm install stylus -g
index.styl是stylus文件的入口文件，里面使用@import 引入各种styl文件

### vue2相较vue1有很多地方改动
比如

>* v-for 中的隐式变量$index,$key已经取消，可以自己定义，例如 v-for="(itemClass,index) key="index"
>* transition书写格式不在是在元素标签上写，而是作为一个标签`<transition></transition>`将目标元素包起来,过渡状态变为4种状态
>* v-el 和 v-ref 都弃用，改为使用`ref`属性为元素或组件添加标记，通过`$refs`获取
>* 只允许一个根元素
>* $dispatch废除，vue2.0中的事件用vue.$emit, vue.$on, $vue.off来派发，响应和解除(增加按钮案例)
>* vue2.0中props中的数据只可以父组件来改变，当子组件试图对该属性进行改变之后vue的编译器会发出警告信息，我们一般不建议子组件对props中的数据进行改变，
当必需时，可以用vue.$emit()方法将这个改变的事件派发出去，在你组件中进行接收并进行相应的改变
>* 生命周期的钩子函数
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

###项目运行
```
克隆项目到本地
git clone https://github.com/harrietjia/vue2-webapp.git

安装依赖
npm install

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

构建生产
npm run build

运行打包文件
node prod.server.js

会看到 Listening at http://localhost:9000 在浏览器中打开即可

```

PC端预览网址：http://73eabb3f-d836-425b-87b0-2d13a4c1c73d.coding.io

移动端也可扫描以下二维码预览：

vue2.0仿饿了么webAPP项目相关推荐

本地运行github上的vue2.0仿饿了么webapp项目
在vue刚刚开始流行的时候,大多数人学习大概都见到过这样的一个项目吧,可以作为学习此框架的一个模板了 github源码地址:https://github.com/RegToss/Vue-SPA 课程教 ...
饿了吗app都是用html写的,Vue2.0仿饿了么webapp单页面应用详细步骤
这篇文章主要为大家详细介绍了Vue2.0仿饿了么webapp单页面应用详细步骤,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 部分截图 [图片暂 ...
VUE2.0仿饿了吗app
效果展示链接:https://wujingj.gitee.io/elema 码云原码链接:https://gitee.com/wujingj/elema
最新 vue2.x 仿饿了么app商家页面项目总结
最新vue2.x仿饿了么app 商家页面项目总结标签(空格分隔): vuejs 前言仿饿了么app是基于vue2.x最新实战项目,用到的技术栈 vue2 + vue-router2 + vue- ...
Vue2.0 仿滴滴出行项目
Vue2.0 仿滴滴出行项目最近,各大社区出现很多小伙伴的vue项目,趁着这股热潮我也用vue撸了一个滴滴出行的项目. 效果预览在线预览:demo 项目地址:github 主要技术栈 vue2.0 ...
Vue仿饿了么app项目总结
前言这是我的第一个基于Vue项目的作品,目的是把之前的前端知识累积加上目前流行的前端框架,以项目的形式展示出来. 大家在学习Vue的时候,可以将此项目作为学习Vue框架的一个模板 Vue仿饿了么ap ...
高仿“饿了么”Vue项目（一）
高仿"饿了么"Vue项目(一) 当我们把Vue框架的概念过了一遍之后,要进一步提升,就要看看别人是怎么使用Vue框架来做项目了. 在github上有不少好的Vue项目,我找到了其中 ...
最新vue2.x仿饿了么app 商家页面项目总结
前言仿饿了么app是基于vue2.x最新实战项目,用到的技术栈 vue2 + vue-router2 + vue-cli2 + vue-resource + stylus + flex布局 + es ...
项目vue2.0仿外卖APP（四）
组件拆分先把项目搭建时生成的代码给清了吧现在static目录下引入reset.css 接着在index.html引入,并且设置<meta> 有时候呢,为了让代码符合我们平时的编码习惯, ...

vue2.0仿饿了么webAPP项目

vue2.0仿饿了么webAPP项目相关推荐

最新文章

热门文章