vue2.0 获取从http接口中获取数据，组件开发，路由配置

vue 2.0 从接口中获取数据

<template>
  <div id="admins">
    <h1>I am a title.</h1>
    <a> written by {{ author }} </a>
    <div  v-for="admin in users">
      {{admin.name}}<br>{{admin.password}}
    </div>
  </div>
</template>

<script type="text/javascript">
import axios from 'axios'
export default {
  name: 'admins',
  data () {
    return {
      author: "there is nonthing",
      users:[]
    }
  },
  mounted(){
    this.getAdminList()
  },
  methods:{
      getAdminList(){
      var vm=this; 
      axios.get('/api/admins')
      .then(function(response){
         vm.users=response.data
      })
    }
  } 
}
</script>

<style>
</style>

解决axios发起http请求遇到跨域的问题
修改 config/index.js

 proxyTable: {
        '/api': {
        target: 'http://127.0.0.1:8080',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
        }
      }
    },

配置router

new Router({
  mode:'history',
  base:__dirname,
  routes: [
   {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/admins',
      name: 'admins',
      component: admins
    }
  ]
})

加载组件

import admins from '@/components/HelloWorld'
export default {
  name: 'App',
  data () {
    return {
      Msg: "there is nonthing",
      seen:false
    }
  },
  componets:{
    HelloWorld
  }
}

心得：vue相当于 和可以自定义html中的标签 和 属性。
在开发过程中，首先容易出现的是标点符号问题，其次是缺少引用的js，或者组件。
感觉看视频中的写法和网络上流传的写法有些地方差别很大，特别是调用http接口获取数据，还是参考网上使用axios解决跨域问题，比较好，此外，官网视频中使用的是在create里面发请求获取数据，但是会报错，使用mounted不会报错。当然使用npm进行管理的话，首先要了解一下整个项目的目录结构。了解完之后再进行开发，才会避免摸不着头脑的情况