Vue里用GraphQL实例，如何构建长尾词？

本文共计762个文字，预计阅读时间需要4分钟。

上篇给大家介绍了Java 使用 Graphql 搭建查询服务详解。这里我们讲讲如何在Vue中使用GraphQL。

1. 初始化vue项目

npm install -g @vue/cli vue create vue-apollo-demo

选择默认cli的默认模板就可以了

添加 /src/graphql/article.js 、 /src/utils/graphql.js 两个文件。

├── node_modules └── public │ ├── favicon.ico │ └── index.html ├── src │ ├── assets │ │ └── home.js │ ├── components │ │ └── HelloWorld.js │ ├── graphql │ │ ├── article.js │ ├── utils │ │ ├── graphql.js │ ├── App.vue │ └── main.js ├── package.json └── package-lock.json

2. 安装Apollo客户端

vue-apollo 可以帮助你在应用中使用GraphQL的一套工具。

你可以使用Apollo Boost或 直接使用 Apollo Client(需要更多配置工作)。

name这里用 Apollo Boost 就可以了，如果你想要更细粒度的控制，可以去看 Vue Apollo 的文档。