仿饿了么App是基于vue2.x最新实战项目,用到的技术栈
vue2 + vue-router2 + vue-cli2 + vue-resource + stylus + flex + eslint + webpack2
* Goods、Ratings、Seller组件视图均可上下滚动
* 商品页 点击左侧menu,右侧list对应跳转到相应位置
* 点击list查看商品详情页,父子组件的通信
* 评论内容够可以筛选查看
* 购物车组件,包括添加删除商品及动效,购物控件与购物车组件之间非父子组件通信,点击购物车图标,展示选择的商品列表
* 商家实景图片可以左右滑动
如果觉得对您有帮助,您可以在右上角给我个star支持一下,谢谢!
.detail // 动画对象
transition .5s
.fade-enter, .fade-leave-to // 淡入开始与淡出结束状态
opacity 0
img
的无src文件时,会有灰色边框,解决方法:换成span标签filter:blur(10px)
高斯模糊backdrop-filter blur(10px)
背景高斯模糊this.$refs.xxx
可用来获取dom节点或子组件和他们的属性/方法:
<menuNav ref="menuNav"></menuNav>
<div id="app">
<input type="text" ref="input1"/>
<button @click="change">添加</button>
</div>
<script>
new Vue({
el: "#app",
methods: {
change:function(){
this.$refs.input1.value ="22" // 减少获取dom节点的消耗
this.$refs.menuNav.style.color = "#333"
}
}
})
</script>
this.$nextTick
:在下次 DOM 更新循环结束之后执行延迟回调- 在vue实例的字符串中调用data的方法(用`而非引号来包裹字符串):
需付${this.totalPrice}
- 根组件到子路由的传参方式:
<keep-alive>
<router-link :seller="seller"></router-link>
</keep-alive>
Array.shift()
:删除数组第一个元素,并返回第一个元素的值this.$refs.food.showOrHide(true)
调用子组件及其方法- 父元素的任何
transform
属性会使子元素的position:fixed
属性失效.解决办法:将需要fixed的元素移出来 event.target
作参数:代指触发事件的dom元素- 自定义浏览器图标:将图标文件放在static下,在index.html头部加入:
<link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">
- 省略大括号{},冒号:分号;
- 按dom节点层级关系书写样式
- & 引用父元素:
a
color #0982C1
&:hover
text-decoration underline
- 混合(mixins)
- 无默认参数 mixins.styl:
bg-image($url) // 参数前加$
background-image url($url +"@2x.png")
@media (min-device-pixel-ratio:3),(-webkit-min-device-pixel-ratio:3)
background-image url($url +"@3x.png")
组件中:
.discount
bg-image('discount') // 参数用字符串调用
- 有默认参数 mixins.styl:
pic-border(niceColor = #fff)
border 1px solid niceColor
组件:
.pic
pic-border(#f00) //参数为空,则为#fff
- 安装BS库:
cnpm i better-scroll -s
- 组件中引入
import BScroll from 'better-scroll'
- 页面中调用滚动方法的地方:
<div ref="menuWrapper"></div>
确保obj高度比其父元素高!;
overflow:hidden
- 在函数钩子里调用初始化方法
确保所在dom渲染后调用方法($nextTick)
created () {
this.$nextTick(() => {
new BScroll(this.$refs.menuWrapper, {
click: true
})
})
}
横向滚动类似,在Scroll对象定义时增加option:
scrollX: true, eventPassthrough: 'vertical'
- 如果子元素或者父元素 DOM 结构发生改变的时候,必须重新调用 scroll.refresh() 方法重新计算来确保滚动效果的正常:
this.$nextTick(() => {
this.scroll.refresh()
})
- 构造伪元素,在相应方向上
transform: scaleY/X(0.5)
:
border-1px($color)
position relative
border none
&:after
position absolute
bottom 0
left 0
content ''
width 100%
height 1px
transform scaleY(0.5)
background $color
- 数据不从api接口处获取,而是写死:
let data = require('../data.json')
this.seller = data.seller
- 建立gh-pages分支
- 克隆项目到本地,切换到gh-pages分支
npm run build
打包项目,删除.git和dist文件夹下内容以外的所有文件- commit
- 在github上选择gh-pages分支开启github pages