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');