1、首先我們需要安裝一下vue-apollo 具體執行命令如下：

代碼如下:npm install –save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag

2、在我們的項目的根目錄下創建一個vueApollo.js文件具體配置如下：

import { ApolloClient } from 'apollo-client';import { HttpLink } from 'apollo-link-http';import { InMemoryCache } from 'apollo-cache-inmemory';import VueApollo from 'vue-apollo';const httpLink = new HttpLink({ uri: './v1/assess/api', /* 其中./v1是我在vue的config中配置時解決跨域時起的代理一個名字，后面的是后端 暴露接口方法的地址 */ credentials: 'same-origin', /* 這個屬性的意思是在同源的情況下攜帶cookie,因為vue-apollo本身發送的是一個fetch請求，所以在發送請求時不會自動攜帶cookie，所以我們需要加上此屬性 */});const apolloClient = new ApolloClient({ link: httpLink, cache: new InMemoryCache(), connectToDevTools: true,});export default new VueApollo({ defaultClient: apolloClient, clients: { default: apolloClient },});

3,接著我們將配置好的js文件引入到man.js中，具體如下：

import Vue from 'vue';import ElementUI from 'element-ui';import VueApollo from 'vue-apollo';import apolloProvider from './apollo';// Install the vue plugin// Vue.component('full-calendar', fullCalendar);Vue.config.productionTip = false;Vue.use(ElementUI);Vue.use(VueApollo);/* eslint-disable no-new */new Vue({ el: '#app', provide: apolloProvider.provide(), //這句代碼是我們要和vuex一樣，將apolloProvider添加為根組件 router, store, template: '<App/>', components: { App },});

準備好這些，我們就可以開始使用了，另外如果有谷歌賬號，可以在谷歌的應用商店去下載“Apollo Client Developer Tools”插件，來模擬vue-apollo調用接口，當然你也可以直接看后端的代碼，然后看接口的定義

4，然后在項目的根目錄下創建一個graphql文件夾，這個文件里面去封裝每一個模塊所對應的方法，為了代碼的簡潔，可以每一個模塊建立一個js文件，實現接口方法的統一管理，比如說我創建了一個交atemplate.graphql文件，注意這個文件夾下所有的文件后綴名都是.graphql。

首先我們說一下query方式的調用：具體代碼如下：

query getAssessTemplateListings($query: String, $state: Int, $page: Int, $pageSize: Int) { assessTemplateListings(query: $query, state: $state, page: $page, pageSize: $pageSize) { assessTemplates {  id  groupId  name  description  state  createdAt  updatedAt } page pageSize total }}

5，然后將該方法引入到所需要調用的vue文件中引入方式如下：

代碼如下:import { getAssessTemplateListings, stopAssessTemplate } from '@/services/graphql/assessTemplate.graphql';