自從用餓了么框架重構(gòu)項(xiàng)目以來柬脸，遇到 很多問題，我都有一一記錄下來妄均，現(xiàn)在特喜歡這個(gè)框架柱锹，說實(shí)話，如果你是用了vue這個(gè)技術(shù)棧的話丰包，一定要用餓了么的pc端框架哦禁熏，遇到問題的時(shí)候在網(wǎng)上百度一下，就能找到解決方案邑彪，還有很多社區(qū)可以討論瞧毙，社區(qū)文檔都比較成熟，很容易上手~~

Element UI手冊：https://cloud.tencent.com/developer/doc/1270
github地址：https://github.com/ElemeFE/element

vue2.0官方網(wǎng)站：http://caibaojian.com/vue/guide/installation.html
element-ui官方網(wǎng)站：https://element.eleme.cn/#/zh-CN

1：進(jìn)入項(xiàng)目锌蓄，npm安裝

npm install axios --save

2.在main.js下引用axios

import axios from 'axios'

3:準(zhǔn)備json數(shù)據(jù)
自己寫了一個(gè)json數(shù)據(jù)升筏，放在服務(wù)器上，現(xiàn)在要通過vue項(xiàng)目調(diào)用數(shù)據(jù)
http://47.xxx.xx.78:8091/ConfigServer/picture.action

4：跨域問題瘸爽，設(shè)置代理您访，利用proxyTable屬性實(shí)現(xiàn)跨域請求
在config/index.js 里面找到proxyTable ：{} ，然后在里面加入以下代碼
（這里處于安全考慮剪决，我隱藏了自己的而服務(wù)器域名灵汪，如果需要測試，改成你自己的即可）

   proxyTable: {
  '/api': {
     target: 'http://x.xx.xx.78:8091',//設(shè)置你調(diào)用的接口域名和端口號 
    changeOrigin: true,//允許跨域
    pathRewrite: {
      '^/api': '' //這個(gè)是定義要訪問的路徑柑潦，名字隨便寫 
    }
  }
},

5:打開一個(gè)界面picture.vue享言，開始寫請求數(shù)據(jù)的方法

 methods: {
            getData() {
                axios.get('/api/ConfigServer/picture.action').then(response => {
                    console.log(response.data);
                }, response => {
                    console.log("error");
                });
            }
        }

picture.vue參考代碼：

<template>
    <div id="app">
    </div>
</template>
<script>
    import axios from "axios";
    export default {
        name: "app",
        data() {
            return {
                itemList: []
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                axios.get('/api/ConfigServer/picture.action').then(response => {
                    console.log(response.data);
                }, response => {
                    console.log("error");
                });
            }
        }
    }
</script>

6：再次運(yùn)行

npm run dev

運(yùn)行成功之后，打開f12渗鬼，查看network的請求
這個(gè)時(shí)候览露，我們可以看見，本地的localhost替代 了我之前放在服務(wù)器上的鏈接的域名譬胎，這也是設(shè)置代理成功差牛，就解決了跨域的問題了。

請求成功

response里面也有返回值堰乔，ok,下一步就要開始將這些數(shù)據(jù)渲染在前端界面上面了偏化。