如何编写Vue项目中使用GraphQL的实例代码？

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

上篇：Java 使用 Graphql 搭建查询服务详解。本文将讲解如何在 Vue 中使用 GraphQL。

1. 初始化 Vue 项目bashnpm install -g @vue/clivue create vue-apollo-demo选择默认的 CLI 模板添加 Apollo 依赖vue add apollo

上篇给大家介绍了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(需要更多配置工作)。