# 简介

::: danger
本文档关联的版本仅支持 Apollo 2.x。查看支持 Apollo 1.x 的旧版本，请点击 [这里](https://github.com/Akryum/vue-apollo/tree/apollo-1).
:::

这个库通过声明式查询将 [apollo](https://www.apollographql.com/) 集成到你的 [Vue](http://vuejs.org) 组件中。兼容 Vue 1.0+ 和 2.0+。

[➡️ 安装](./installation.md)

## 赞助商

### Gold

<p style="text-align: center;">
  <a href="https://www.sumcumo.com/en/" target="_blank">
    <img src="https://cdn.discordapp.com/attachments/258614093362102272/570728242399674380/logo-sumcumo.png" alt="sum.cumo logo" class="gold-sponsor">
  </a>
</p>

### 银牌赞助商

<p style="text-align: center;">
  <a href="https://vueschool.io/" target="_blank">
    <img src="https://vueschool.io/img/logo/vueschool_logo_multicolor.svg" alt="VueSchool logo" class="silver-sponsor">
  </a>

  <a href="https://www.vuemastery.com/" target="_blank">
    <img src="https://cdn.discordapp.com/attachments/258614093362102272/557267759130607630/Vue-Mastery-Big.png" alt="Vue Mastery logo" class="silver-sponsor">
  </a>
</p>

### 铜牌赞助商

<p align="center">
  <a href="https://vuetifyjs.com" target="_blank">
    <img src="https://cdn.discordapp.com/attachments/537832759985700914/537832771691872267/Horizontal_Logo_-_Dark.png" alt="Vuetify logo" class="bronze-sponsor">
  </a>

  <a href="https://www.frontenddeveloperlove.com/" target="_blank" title="Frontend Developer Love">
    <img src="https://cdn.discordapp.com/attachments/258614093362102272/557267744249085953/frontend_love-logo.png" alt="Frontend Developer Love logo" class="bronze-sponsor">
  </a>
</p>

## Become a sponsor

你的公司是否使用了 vue-apollo 或 vue-cli-plugin-apollo 来构建出色的应用程序？加入资助者并成为赞助商，在此文档中添加你的 logo！在 Patreon 上支持我，将节省我用于谋生的工作时间，从而能够在如 vue-apollo 一样的免费开源软件上工作更多！谢谢！

<p style="text-align: center;">
  <a href="https://www.patreon.com/akryum" target="_blank">
    <img src="https://c5.patreon.com/external/logo/become_a_patron_button.png" alt="Become a Patreon">
  </a>
</p>

## 幻灯片

如果你从未听说过 GraphQL 或 Apollo，在这里先睹为快：

<iframe
  src="//slides.com/akryum/vue-apollo-graphql/embed?style=light"
  width="100%"
  height="500"
  scrolling="no"
  frameborder="0"
  webkitallowfullscreen
  mozallowfullscreen
  allowfullscreen
/>

## 什么是 GraphQL？

[GraphQL](https://graphql.org/) 是一个旨在简化前端和后端之间通信的规范。它主要由服务端的 schema 语言和客户端的查询语言组成。

## 什么是 Apollo?

[Apollo](https://www.apollographql.com/) 是通过社区力量帮助你在应用中使用 GraphQL 的一套工具。它的 [客户端](https://www.apollographql.com/client) 和 [服务端](https://www.apollographql.com/server) 都非常有名。Apollo 由 [Meteor 开发团队](https://www.meteor.io/) 开发和支持。

## 链接

[⚡ 在线演示](https://jsfiddle.net/Akryum/oyejk2qL/)

[<img src="https://assets-cdn.github.com/favicon.ico" alt="icon" width="16" height="16"/> Vue-cli 插件](https://github.com/Akryum/vue-cli-plugin-apollo)

[<img src="https://assets-cdn.github.com/favicon.ico" alt="icon" width="16" height="16"/> 更多 vue-apollo 示例](https://github.com/Akryum/vue-apollo-example)

[<img src="https://assets-cdn.github.com/favicon.ico" alt="icon" width="16" height="16"/> Apollo graphql server 示例](https://github.com/Akryum/apollo-server-example)

[<img src="https://graphql.org/favicon.ico" alt="icon" width="16" height="16"/> GraphQL 中文文档](http://graphql.cn/)

[<img src="https://www.howtographql.com/static/howtographql.d1a2e5b4.svg" alt="icon" width="16" height="16"/> How to GraphQL](https://www.howtographql.com/vue-apollo/0-introduction/)

[<img src="https://conf.vuejs.org/img/logo-48.png" alt="icon" width="16" height="16"/> VueConf 2017 演示](https://github.com/Akryum/vueconf-2017-demo) &amp; [讲义](http://slides.com/akryum/graphql#/)

[<img src="https://assets-cdn.github.com/favicon.ico" alt="icon" width="16" height="16"/> Devfest 峰会示例](https://github.com/Akryum/devfest-nantes-2017)（包括许多特性，如 SSR、OAuth、实时更新、Apollo Engine 等）