vue项目使用vue-apollo实现前后端联调

本文主要是介绍vue项目使用vue-apollo实现前后端联调，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

配置vue-apollo和graphql

将今天搜集的资料了解到的写在这里供以后自己参考
这是参考价值最大的原文连接，大家可以直接看这个

在vue-cli3项目中使用vue-apllo实现前端调用后端接口

1）安装相关服务

npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag

2）创建一个vue-apollo.js文件进行配置

import Vue from 'vue'
import VueApollo from 'vue-apollo'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'Vue.use(VueApollo);// 这里的地址写后端所在电脑的IP和端口号
const httpLink = new HttpLink({uri: 'http://localhost:10010/graphql',
});//创建Apollo客户端
const apolloClient = new ApolloClient({link: httpLink,cache: new InMemoryCache(),connectToDevTools: true,
});export default new VueApollo({defaultClient: apolloClient,
})

3）在main.js文件中引用

import babelPolyfill from 'babel-polyfill';new Vue({router,store,apolloProvider,...App,
}).$mount('#app');

这篇关于vue项目使用vue-apollo实现前后端联调的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---