本文介绍了如何在 Vue 项目中使用 Vue Apollo 访问后端 GraphQL API。首先，通过 Vue CLI 创建项目，然后配置 Vue Apollo，连接到 Django GraphQL 接口。接着，展示了如何创建查询文件并展示数据。最后，提到了跨域问题的解决方案，并总结了 GraphQL 在前后端分离中的优势。
阅读大约需要 3 分钟
接前文为 Django 配备 GraphQL API，Django 提供 GraphQL 接口服务之后，我们需要让前端来消费这些接口数据，以 Vue 为例，看一看前端如何访问后端 GraphQL API。本文提供一个跑的通的 demo，可以先收藏，后面如有需要可以直接使用。
先创建一个 Vue 项目
执行下面的命令，就可以创建并启动一个 Vue 的 hello-world 项目：
vue create hello-world
cd hello-world
npm run serve
默认情况下，服务将监听 localhost 的 8080 端口，浏览器访问 http://localhost:8080 就会看到 Vue 框架渲染的网页。
注意第一步执行 vue create hello-world 时我们选择默认的 Vue2， Vue3 是 2020 年 09 月 18 日发布的，我在使用 Vue3 时后面生成样例代码那一步报错了，这里暂时用 Vue2 吧，让 Vue3 再飞一会儿。
如果你还没有用过 Vue，请去官方网站[1]学习一下。
使用 Vue Apollo
Vue Apollo[2] 是一个三方库，可以让你在 Vue 的应用中使用 GraphQL，使用起来也很轻松，在上述 hello-world 目录下，也就是 package.json 同级的目录下，打开命令窗口执行：
vue add apollo
这个命令会自动安装 npm 包：graphql graphql-tag @apollo/client。除此之外会让你选择是否生成代码，是否配置相关的 API，如下图所示：
最低0.47元/天 解锁文章
扫一扫
1055
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
