vue2.0已经出来很久了，但是相关的实战项目却很少，以下是我个人练手项目，分享给大家，希望大家可以相互交流，若有错误，请告知。
首先我们需要用到猫眼电影提供的数据api接口，接口详情可以参照这篇文章：http://www.jianshu.com/p/9855610eb1d4。
现在开始我们的项目：
1、首先你需要安装node.js，webpack，默认读者已经安装完毕，在以上条件下，我们安装vue-cli(npm install vue-cli -g)，或者使用淘宝镜像npm install -g cnpm --registry=http://registry.npm.taobao.org，对应npm改为cnpm就行。
2、所有需要的工具安装完后，我们使用vue-cli构建一个初始化的项目，打开node命令行窗口，切换到你的项目目录，然后使用 vue init webpack maoyan创建初始化的项目，目录结构如下：

我们主要的操作都在src目录下，接下来我们修改src目录如下：

在组件文件夹中增加如图所示文件，并增加一个pages文件夹，home.vue为我们的首页。
3、接下来为各组件代码编写：
a、header.vue

b、tab.vue

c、movieList.vue

d、getMore

e、cinemaList.vue

以上代码编写完后，我们接着编写home.vue

如果数据是在各自组件获取的，可以考虑使用localStorage缓存数据，避免tab切换需要重新请求数据

至此，我们完成了大部分代码编写，需要注意的是vue-cli构建的项目并没有安装axios,你需要自行安装。
一切就绪后我们编写我们的路由文件index.js：

内容如下：

import Vue from 'vue'
import Router from 'vue-router'
import Header from '@/components/header'
import movieList from '@/components/movieList'
import cinemaList from '@/components/cinemaList'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'movieList',
      component: movieList
    },
    {
      path: '/movieList',
      name: 'movieList',
      component: movieList
    },
    {
      path: '/cinemaList',
      name: 'cinemaList',
      component: cinemaList
    }
  ],
  history: true
})

最后修改入口文件main.js：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Home from './pages/home'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '',
  components: { Home }
})

注意事项：因为我们使用的是猫眼的数据api接口，在我们自己的环境下是存在跨域的，所以我们需要给我们的ajax请求设置代理，配置文件在下面的目录中：

打开index.js,修改proxyTable配置项：

index.html内容：

common.css为样式重置文件，根据需要自行编写。
至此，我们的实例项目就完成了，表述不好，敬请见谅。
预览图：