<template>
  <div>
    <table>
      <tr v-for="article in articles" :key="article.id">
        <div>{{ article.title }}</div>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      title: '博客列表页',
      articles: [
      ]
    }
  },
  mounted () {
    this.$http.get('http://mysite/api/articles').then((response) => {
      console.info(response.body)
      this.articles = response.body.articles
    }, (response) => {
      console.error(response)
    })
  }
}
</script>
<style>
td {
  border-bottom: 1px solid grey;
}
</style>

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import BlogList from '@/components/BlogList'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/BlogList',
      name: 'BlogList',
      component: BlogList
    }
  ]
}) 

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://admin.meiyi.site', // 指定代理目标的基础路径
        changeOrigin: true, // 启用跨域
        pathRewrite: {
          '^/api': '' // 可选的，重写请求路径，将 '/api' 替换为空字符串
        }
      }
    },

}

$ npm install vue-resource

import VueResource from 'vue-resource'

Vue.use(VueResource)