简单配置axios以及封装子组件

/**
 * 简单配置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>
 *
 */