/**
 * 簡單配置axios以及封裝子元件
 * 1、下載 npm install axios
 * 2、檔案目錄：
 *   plugin/axios/index.js
 *   import axios from 'axios'
 *   axios.defaults.timeout = 30000    請求超時時間為30s     注意defaluts是有s的
 *   axios.defaults.withCredentails = true  大概是允許跨域請求的意思
 *   axios.defaults.baseURL = process.env.NODE_ENV === 'development'?'':''   預設下是開發模式
 *   最後一步
 *   export defalut{
 *       install(vue){
 *           vue.prototype.$http = axios    請求時呼叫 this.$http.post  或者thi.$http.get
 *       }
 *   }
 *
 *   plugin/api/index.js 用來存放介面
 *   例如：
 *   let api = {
        SCORE: 'student/score'  //這個介面在easymock上已經模擬好了
    };
     export default {
        install (Vue) {
            Vue.prototype.$api = api;
        }
    }

 3、上面寫好了api/index.js 以及 axios/index.js，還需要在main.jg中引進來
 import api '../plugin/api/index.js' //找準路徑
 import axios '../plugin/axios/index.js'
 Vue.use(api)
 Vue.use(axios)

 4、已經簡單寫了axios的請求，然後是該用一下
 那麼，我將會封裝一個簡單的子元件，在父元件下請求資料，再渲染到子元件中。
 同樣，另起一個檔案存放子元件，方便呼叫。
 /components/common/PContainer.vue
 內容：（簡單粗暴）
     <template>
     <div class="p_container">
     <ul>
     <li v-for="(item,index) in data" :key="index">
     <p>姓名：{{item.name}}</p>
     <p>分數：{{item.score}}</p>
     <p>日期： {{item.date}}</p>
     </li>
     </ul>
     </div>
     </template>
     <script>
     export default {
            name: "PContainer",
            data () {
                return {
                }
            },
            props:{
                data:Array    //接受父元件傳進來的dataList
            }
        }
     </script>
     <style scoped>
     li{
            margin-bottom:20px;
        }
     </style>

 /components/index.js   註冊元件
 import Vue from 'vue'
 import PContainer from './common/PContaier'
 Vue.component('PContainer',PContainer)   //註冊為全域性元件
 export{
    PContainer
 }
 還要記得在main.js中引進！！！剛開始忘記了，結果報錯p-container沒有正確註冊
 main.js檔案下：
 import '../components/index.js'

 接下來我在父元件中使用這個子元件
 內容：（簡單粗暴）
 <template>
 <div class="demo_router">
     <div>
     <p-container :data="scoreList"></p-container>
     </div>
 </div>
 </template>
 <script>
 export default {
        name: "demo",
        data () {
            return {
                scoreList: []
            }
        },
        methods: {
            init () {
               this.$http.get(this.$api.SCORE).then(res=>{
                   this.scoreList = res.data.data
               })
            }
        }，
        mounted () {
            this.init()
        }
    }
 </script>
 <style scoped>
 </style>
 *
 */