strapi+Gridsome+Graphql的博客搭建前端

最近想要搭建一个静态网站，动态获取数据，于是就发现了 Gridsome ，后端想要使用strapi ，于是发现了，strapi+ Gridsome 的开箱即用的项目。
GitHub地址：strapi-starter-gridsome-blog
一，项目搭建 【strapi+Gridsome+Graphql的博客搭建】1.1 使用如下命令，可以快速搭建前后端。 my-project 为文件夹名，可自定义修改。

# Using Yarn yarn create strapi-starter my-project gridsome-blog# Or using NPM npx create-strapi-starter my-project gridsome-blog

1.2，文件结构

|--my-project |---backend |---frontend

backend是存放strapi的项目内容
frontend是存放 gridsome 的项目。
1.3，启动项目
进入项目目录，分别启动strapi 和 gridsome
strapi启动地址：http://localhost:1337/admin
gridsome启动地址： http://localhost:8082/
gridsome 数据查询地址：http://localhost:8082/___explore ————可以通过这个地址，直接测试数据。
他是一个开箱即用的项目，也有写好的数据操作，相当方便使用。
二，项目基本使用 2.1，创建新的page
可以在 gridsome.server.js 文件里，通过createPage API创建

module.exports = function (api) { api.createPages(async ({ graphql, createPage }) => { const { data } = await graphql(` { strapi { gameInfos { slug } } } `); // Create blog articles pages. const gameInfos = data.strapi.gameInfos; gameInfos.forEach((gameInfos) => { createPage({ path: `/gameInfos/${gameInfos.slug}`, component: "./src/templates/gameInfos.vue", context: { slug: gameInfos.slug, }, }); }); }); };

gameInfos 表示，在strapi后台创建的 COLLECTION TYPES
页面将通过slug区分并创建新的路由。
2.2，页面数据内容
直接在标签内，使用 Graphql 语法，就可以直接获取数据，

query($slug: String!) { strapi { articles(where: { slug: $slug }) { title description content published_at image { url } author { name picture { url } } } } }

HTML：

{{ $page.strapi.articles[0].title }}

注：
gridsome 中 layout 下default.vue 文件是全局默认引用，如果不想使用，可以起别名。
引申：
这个项目采用的是 Graphql。
GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。
官方地址：https://graphql.cn/learn/quer...
1，基本使用
以下是你想要查询的数据。