vue-cli项目如何使用vue-resource获取本地的json数据（模拟服务端返回数据）

下面是“vue-cli项目如何使用vue-resource获取本地的json数据（模拟服务端返回数据）”的完整攻略。

准备工作

1. 确认本地已具备Node.js和Vue-cli环境。
2. 在Vue-cli环境中新建一个Vue项目。

安装vue-resource

1. 在Vue项目目录下使用命令行工具，输入以下命令进行安装：

npm install vue-resource --save

创建模拟数据

1. 在Vue项目目录下新建一个data.json的文件，放入以下代码：

{
  "list": {
    "1": {"name":"apple"},
    "2": {"name":"banana"},
    "3": {"name":"orange"},
    "4": {"name":"watermelon"}
  }
}

创建 Vue 组件

1. 在 Vue 项目中新建一个 Test.vue 组件，用于演示获取本地数据。代码如下：

<template>
  <div class="test">
    <div v-for="(item, index) in list">{{item.name}}</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.$http.get('data.json').then((response) => {
        this.list = response.body.list
      })
    }
  }
}
</script>

测试获取数据

1. 在其他页面的组件中使用Test组件进行测试。代码如下：

<template>
  <div>
    <Test/>
  </div>
</template>

<script>
import Test from './Test.vue'

export default {
  components: {
    Test
  }
}
</script>

1. 启动 Vue 项目，在浏览器中打开页面，可以看到已成功获取到本地模拟数据。

以上是“vue-cli项目如何使用vue-resource获取本地的json数据（模拟服务端返回数据）”的完整攻略，希望能对你有所帮助。