1.组件的js写法

export default {
  name: "TP300", //组件的名称
  data() {
    return {
      keys: "",
      light: "",
      deep: "",
      flagRange: "",
      flag: "",
      showopa: "",
      hideopa: "",
      currentSpan: "",
      SnNum: "",
      listItems: [],
      title: "",
      rangeList: []
    };
  },
  mounted: function() {
    this.$http.get("../../static/data.json").then(response => {
      console.log(response);
      this.keys = response.data.keys; //数据位置
      this.light = response.data.light; //数据位置
      this.deep = response.data.deep; //数据位置
      this.flagRange = response.data.flagRange; //数据位置
      this.flag = response.data.flag; //数据位置
      this.showopa = response.data.showopa; //数据位置
      this.hideopa = response.data.hideopa; //数据位置
      this.currentSpan = response.data.currentSpan; //数据位置
      this.SnNum = response.data.SnNum; //数据位置
      this.listItems = response.data.listItems; //数据位置
      this.title = response.data.title; //数据位置
      this.rangeList = response.data.rangeList; //数据位置
    });
  }
  }
};

此处的mounted函数可以替换为created，影响并不是很大。

2.入口文件main.js

import Vue from 'vue'
import App from './App'
import VueResource from 'vue-resource'
Vue.use(VueResource);
import router from './router/index.js'
import './assets/css/main.css'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3.json文件格式

{
        "keys": "",
        "light": "已完成",
        "deep": "#41b883",
        "flagRange": 0,
        "flag": 1,
        "showopa": "1",
        "hideopa": "0.1",
        "currentSpan": "",
        "SnNum": 20,
        "listItems": [
            {
                "lable": "",
                "box": [
                    {
                        "tag": "",
                        "Sn": [
                            {
                                "name": "",
                                "status": "",
                                "duty": ""
                            },
                            {
                                "name": "",
                                "status": "",
                                "duty": ""
                            }
                        ]
                    },
                    {
                        "tag": "",
                        "Sn": [
                            {
                                "name": "",
                                "status": "",
                                "duty": ""
                            },
                            {
                                "name": "",
                                "status": "",
                                "duty": ""
                            }
                        ]
                    }
                ]
            },
            {
                "lable": "",
                "box": [
                    {
                        "tag": "",
                        "Sn": [
                            {
                                "name": "",
                                "status": "",
                                "duty": ""
                            },
                            {
                                "name": "",
                                "status": "",
                                "duty": ""
                            },
                            {
                                "name": "",
                                "status": "",
                                "duty": ""
                            }
                        ]
                    }
                ]
            }
        ],
        "title": "",
        "rangeList": [
            {
                "name": "",
                "percent": ""
            },
            {
                "name": "",
                "percent": ""
            },
            {
                "name": "",
                "percent": ""
            }
        ]
    }

4.总结

        要调用后台、数据，需引入vue-resource，此处可使用npm工具，进行安装，

       4.1、安装vue-resource到项目中，找到当前项目

                输入：npm install vue-resource --save

       4.2、安装完毕后，在main.js中导入，如下所示：

               import  VueResource  from 'vue-resource'

               Vue.use(VueResource) 

       4.3、我也不知道为什么我第一次引入的时候，将

Vue.use(VueResource);

这句代码放到了main.js的最后，导致报错：Cannot read property 'get' of undefined"

正确的方法是放到

vue实例：

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

的前面