Element UI手冊：https://cloud.tencent.com/developer/doc/1270
中文文檔：http://element-cn.eleme.io/#/zh-CN
github地址：https://github.com/ElemeFE/element
1：進入項目，npm安裝
npm install axios --save
2.在main.js下引用axios
import axios from 'axios'
3:準(zhǔn)備json數(shù)據(jù)
自己寫了一個json數(shù)據(jù)抡驼，放在服務(wù)器上键菱，現(xiàn)在要通過vue項目調(diào)用數(shù)據(jù)
http://www.intmote.com/test.json
4：跨域問題展蒂，設(shè)置代理，利用proxyTable屬性實現(xiàn)跨域請求
在config/index.js 里面找到proxyTable ：{} ，然后在里面加入以下代碼
proxyTable: {
'/api': {
target: 'http://www.intmote.com',//設(shè)置你調(diào)用的接口域名和端口號 別忘了加http
changeOrigin: true,//允許跨域
pathRewrite: {
'^/api': '' //這個是定義要訪問的路徑薄榛，名字隨便寫
}
}
},
5:打開一個界面User.vue，開始寫請求數(shù)據(jù)的方法
methods: {
getData() {
axios.get('/api/test.json').then(response => {
console.log(response.data);
}, response => {
console.log("error");
});
}
}
User.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/test.json').then(response => {
console.log(response.data);
}, response => {
console.log("error");
});
}
}
}
</script>
6：再次運行
npm run dev
這個時候让歼，我們可以看見蛇数，請求的數(shù)據(jù)
原文作者：祈澈姑娘 技術(shù)博客：http://www.reibang.com/u/05f416aefbe1
90后前端妹子，愛編程是越，愛運營耳舅，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚倚评，對于博客上面有不會的問題浦徊，歡迎加入編程微刊qq群：260352626。
