当前位置: 首页 > 工具软件 > vue-apollo > 使用案例 >

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

徐安康
2023-12-01

配置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');
 类似资料: