使用vue-cli脚手架工具创建一个简单的单页应用

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

    .header{
 height: 1.25rem;
 line-height: 2.5;
 background: #e54847;
 color: #fff;
 text-align: center;
 font-size: 0.5rem;
    }

b、tab.vue

    .tab-group{
 position: relative;
 background: #fff;
 margin-bottom: 0.125rem;
    }
    .tab{
 display: box;
 display: -webkit-box;
    }
    .tab li{
 box-flex:1;
 -webkit-box-flex:1;
 text-align: center;
 height: 1.09375rem;
 line-height: 1.09375rem;
 text-align: center;
 font-size: 0.4375rem;
    }
    .tab li.active a{
 color: #e54847;
    }
    .tab li a{
 display: block;
    }
    .active-bar{
 position: absolute;
 height: 0.09375rem;
 background: #e54847;
 width: 50%;
 left: 0;
 bottom: -0.09375rem;
 transition: all .3s;
    }
    .activeChange{
 left: 50%;
    }

c、movieList.vue

    .movie-list{
 background: #fff;
 padding: 0 0.3125rem;
    }
    .movie-list .item{
 position: relative;
 border-bottom: 1px solid #E6E6E6; 
 padding: 0.3125rem 0;
 font-size: 0.375rem;
 overflow: hidden;
    }
    .movie-cover{
 width: 21.7%;
 float: left;
    }
    .movie-content{
 width: 75%;
 float: right;
    }
    .box-row{
 margin-bottom: 0.3125rem
    }
    .movie-version{
 position: relative;
 top: 0.09375rem;
 color: #8BB7CE;
 border: 1px solid #8BB7CE;
 border-radius: 5px;
 height: 0.3125rem;
 display: inline-block;
 line-height: 0.28125rem;
 padding: 0.0625rem;
 overflow: hidden;
 transform: scale(0.9);
    }
    .v2d:before,.v3d:before{
 content: '2d';
 background: #8BB7CE;
 color: #fff;
 padding: 0 0.09375rem;
 margin-left: -0.0625rem;
 margin-right: 0.0625rem;
    }
    .v3d:before{
 content: '3d';
    }
    .score{
 float: right;
 color: #FFB400;
    }
    .movie-content p{
 color: #666;
 margin-bottom: 0.15625rem;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 width: 70%;
    }
    .movie-content p.movie-show{
 color: #999;
    }
    .movie-name{
 font-size: 0.4375rem;
    }
    .movie-btn{
 position: absolute;
 right: 0;
 bottom: 0.375rem;
 background: #EF4238;
 color: #fff;
 border-radius: 3px;
 padding: 0.09375rem 0.15625rem;
    }
    .movie-btn-presale{
 background: #52B0EB;
    }

d、getMore

    .more{
 width:90%;
 margin: 10px auto;
 font-size: 0.375rem;
 background: #EF4238;
 border-radius: 3px;
 color:#fff;
 height: 40px;
 line-height: 40px;
 text-align: center;
    }
    .disabled{
 background: #bfbbbb;
 cursor: not-allowed;
    }

e、cinemaList.vue

    .cinema-list {
 background: #fff;
 padding: 0 0.3125rem;
 font-size: 0.4375rem;
    }
    .cinema-container{
 padding: 0.3125rem 0;
 border-bottom: 1px solid #E6E6E6;
    }
    .cinema-name{
 display: inline-block;
    }
    .price{
 display: inline-block;
 color: #e54847;
 font-size: 0.375rem;
    }
    .price .num{
 font-size: 0.4375rem;
    }
    .address,.dis{
 color: #666;
 font-size: 0.375rem;
 display: inline-block;
 overflow: hidden;
    }
    .dis{
 color: #999;
    }
    .address{
 width: 80%;
 text-overflow: ellipsis;
 white-space: nowrap;
    }
    .mtb8{
 margin: 0.25rem 0;
    }
    .seat,.hall{
 display: inline-block;
 color: #8BB7CE;
 font-size: 0.375rem;
 padding: 0 0.0625rem;
 border-radius: 3px;
 margin-right: 0.15625rem;
 border: 1px solid #8BB7CE;
    }

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

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

    .shake-enter-active {
      animation: shake .3s;
    }
    .shake-leave-active {

    }
    @keyframes shake {
 0%,to {
     transform: translateZ(0)
 }

 10%,90% {
     transform: translate3d(-10px,0,0)
 }

80% {
     transform: translate3d(10px,0,0)
 }
    }

至此，我们完成了大部分代码编写，需要注意的是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


new Vue({
  el: '#app',
  router,
  template: '',
  components: { Home }
})

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

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

index.html内容：

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