vue简单请求后端接口渲染到页面

一、创建一个新的vue项目

1. 安装node环境(推荐：Vue环境搭建+VSCode+Win10)
2. 终端执行命令（创建一个新的项目）： vue init webpack ”项目名称“
3. cnpm install 打包项目
4. cnpm run dev 启动项目
5. 初始项目已经建好啦…

二、修改HellowWorld.vue代码如下

<template>
  <div id="app">
    <table type="selection" align="center" border="1">
      <tr>
        <td>姓名</td>
        <td>年龄</td>
      </tr>
      <!-- 请求参数请按照自己返回数据解析-->
      <div v-for="item in info.data" :key='item'>
        <tr>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </div>
    </table>
  </div>
</template>

<script>
// import Vue from 'vue'
import axios from 'axios'

export default {
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('/api/user/findUser')// 若没有更改index.js配置此处应写全部路径 http://localhost:6062/user/findUser
      .then(response => (this.info = response.data),
        reason => {
          console.log('error')
        })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

三、保存项目自动加载查看前台页面

四、本地测试如果遇到跨域问题解决办法

在config文件夹下面的index.js修改配置如下
修改前：

修改后：

贴上代码：

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost:6062',
        changeOrigin: true,
        pathRewrite: {
          '/api': ''
        }
      }
    },

至此，应该没啥问题了，刚刚开始接触vue，若有问题请不吝指教！