Vue饿了么app

作者 新城 日期 2017-10-09
Vue
Vue饿了么app

Vue.js框架

  • Vue.js介绍
  • Vue-cli脚手架搭建基本代码框架
  • vue-router官方插件管理路由
  • vue-resource AJAX通信
  • webpack 构建工具
  • es6 + eslint –>代码风格检查工具


    公司漂亮夜景


工程化 组件化 模块化
移动端开发技巧 (布局 交互)

Vue
  • 轻量级Mvvm框架
  • 数据驱动 + 组件化 开发
Vue-cli
  • 目录结构
  • 本地调试
  • 代码部署
  • 热加载
  • 单元测试

安装

1
2
3
4
5
6
7
8
9
npm install -g vue-cli  //安装脚手架

vue init webpack sell ///注意 vue init 初始化

cd sell

npm install

npm run dev

better-scroll
1.布局


2.在需要滚动的div上面添加
1
2
ref="menuwrapper"
ref="foodwrapper"


3.添加方法
1
2
3
4
5
6
7
8
_initScroll () {
this.meunScroll = new BScroll(this.$refs.menuwrapper, {
click: true
})
this.foodScroll = new BScroll(this.$refs.foodwrapper, {
click: true
})
}

4.使用方法

1
2
3
4
5
6
// dom结构加载结束
this.$nextTick(() => {
setTimeout(() => {
this._initScroll()
}, 100)
})

定时器存在的意义:等待dom完全执行完毕以后初始化滚动插件

5.vue computed属性
table-cell布局

1
2
3
display:table
display:table-cell
vertical-align: middle

6.父子 兄弟组件之间通信

安装 npm install stylus stylus-loader
npm install vue-resource

打包失败
cd dist
npm install -g http-server // 该命令只需执行一次, 安装过之后, 以后就不需要重复安装了.
hs

路由定向
routes: [
{
path: ‘/‘,
redirect: ‘/goods’
},

子组件派发事件到父组件

1
this.$emit('select', num); /

父组件

1
2
3
4
5
6
7
@select="selectRating"
selectRating(type) { // 触发接收到子组件的派发事件
this.selectType = type;
this.$nextTick(() => {
this.scroll.refresh();
});
}

(饿了么部署到GitHub)[https://createwj.github.io/VUE2.0-/sell/dist/]