snakeninja110 / elm-sell

饿了么购物车Vue2.0

elm-project

A Vue.js 饿了么 project

打开命令行工具 cd: 到项目目录，输入npm install 回车，即可安装项目中所以的依赖

输入 npm run dev 回车。然后在浏览器打开，localhost:8088 即可访问项目

在build/webpack.base.config中可以设置alias设置相应的别名，可以在导入时简化路径

---

Vue2.0一些改变

官方文档

vue2.0废除了v-el指令，所有的节点指令修改为ref，然后通过ref来获取元素节点，如

<div ref="testHook">test</div>

js code

this.$ref.testHook

动画效果

Vue 的过渡系统有了彻底的改变，现在通过使用 <transition> 和 <transition-group> 来包裹元素实现过渡效果，而不再使用 transition 属性

vue-router2.0

重定向routes [{path:'/',redirect:{'/', 'goods'}}];不再是1.0中的.go()

expected "indent", got "eos" 在写stylus时碰到这种问题，肯定是由于编辑器使用了不一样的缩进方式，需要进行设置即可。因为他在你的编辑器中可能是对齐了的，但是实际并没有。 stylus mixin只可以为样式提供函数的功能

Axios

在vue1.x的时候，vue的官方推荐HTTP请求工具是vue-resource，但是在vue2.0的时候将推荐工具改成了axios。使用方式都差不多，但需要注意的是：接口返回的res并不直接是返回的数据，而是经过axios本身处理过的json对象。真正的数据在res.data里

使用emit来发送广播

vue2提供了一套广播机制，即一边发送广播，一边接收广播来执行相应操作。 比如想要给test组件发送一个“相加”广播:

export default {
  method:{
    click(){
      Vue.$emit('add',{}) //第二个参数可作为传递数据传送到监听端口，不需要则传空对象
    }
  }
}

那么test组件中就需要监听，在created方法里写

export default {
  created(){
   Vue.$on('add',this.add)
  },
  method:{
    add(){
      this.count++
    }
  }
}

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

一些参考文档：

教学源码

better-scroll

其他人的源码：1 2

flex布局

vue饿了么踩坑指南

http://blog.csdn.net/sinat_17775997/article/details/55189091

http://www.cnblogs.com/waitforyou/p/6760807.html

感谢前人的脚步

For detailed explanation on how things work, checkout the guide and docs for vue-loader.