使用vue-cli腳手架工具建立一個簡單的單頁應用

vue2.0已經出來很久了，但是相關的實戰專案卻很少，以下是我個人練手專案，分享給大家，希望大家可以相互交流，若有錯誤，請告知。
首先我們需要用到貓眼電影提供的資料api介面，介面詳情可以參照這篇文章：。
現在開始我們的專案：
1、首先你需要安裝node.js，webpack，預設讀者已經安裝完畢，在以上條件下，我們安裝vue-cli(npm install vue-cli -g)，或者使用淘寶映象npm install -g cnpm --registry=。
2、所有需要的工具安裝完後，我們使用vue-cli構建一個初始化的專案，開啟node命令列視窗，切換到你的專案目錄，然後使用 vue init webpack maoyan建立初始化的專案，目錄結構如下：

我們主要的操作都在src目錄下，接下來我們修改src目錄如下：

在元件資料夾中增加如圖所示檔案，並增加一個pages資料夾，home.vue為我們的首頁。
3、接下來為各元件程式碼編寫：
a、header.vue

    export default{
        data(){
            return {
                title:'猫眼电影'
            };
        }
    }

b、tab.vue

    export default{
        name:'tab-group',
        watch:{
            '$route':'tabActiveSlider'
        },
        data(){
            return {
                'isChange':false
            };
        },
        methods:{
            'tabActiveSlider':function(){
                this.isChange=!this.isChange;
            }
        },
        created:function(){
            if(this.$route.path=='/cinemaList'){
                this.isChange=true;
            }
        }
    }

c、movieList.vue

    import getMore from './getMore'
    import axios from 'axios'
    export default{
        name:"movieList",
        props:['movieList'],
        components:{
            getMore
        }
    }

d、getMore

e、cinemaList.vue

    import axios from 'axios'
    export default{
        name:"cinemaList",
        props:['cinemaList']
    }

以上程式碼編寫完後，我們接著編寫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為樣式重置檔案，根據需要自行編寫。
至此，我們的例項專案就完成了，表述不好，敬請見諒。
預覽圖：