cnpm install vue-resource --save
在根目錄下的package.json檢查一下插件的版本html
在rourer-index.js下引入文件vue
import Resource from 'vue-resource' Vue.use(Resource)
引入vue-resource後,能夠基於全局的Vue對象使用http,也能夠基於某個Vue實例使用http 參考連接ios
cnpm install --save axios
在後臺服務文件(server.js)中引入npm
var axios = require('axios')
新建一個公共Js文件,用於存放httpserverjson
import axios from 'axios' // 引入axios插件 export function getHttp (url, callFun) { //get請求方法 axios.get(url).then(callFun) .catch(function(err){ console.log(err) }) }
在config-index.js
文件下找到proxyTable
設置代理axios
例如個人vue項目連接是 localhost:8080 後臺數據地址是 localhost:8081/api/seller(端口不同)api
proxyTable: { '/api': { target: 'http://localhost:8081', changeOrigin: true, pathRewrite: { '^/api': '/api' // pathRewrite方法重寫url, 這樣配置出來的url爲http://localhost:8081/api/seller // '^/api': '/' // pathRewrite方法重寫url, 這樣配置出來的url爲http://localhost:8081/seller } } }
在想調用數據的vue頁面中寫入以下代碼app
js部分
vue-resource
<script> import {getHttp} from '../static/js/httpserver.js' export default { data () { return { seller: {} } }, methods: { shangjia: function () { let url = '/api/seller' getHttp(url, function (res) { res = res.data console.log(res) }) } } } </script>
html部分
ui
<template> <div id="app"> <div @click='shangjia()'><router-link to='/seller'>商家</router-link></div> <router-view></router-view> </div> </template>