最近想要搭建一个动态网站，动静获取数据，于是就发现了 Gridsome ，后端想要应用strapi ，于是发现了，strapi+ Gridsome 的开箱即用的我的项目。
GitHub地址：strapi-starter-gridsome-blog

一，我的项目搭建

1.1 应用如下命令，能够疾速搭建前后端。 my-project 为文件夹名，可自定义批改。

# Using Yarnyarn create strapi-starter my-project gridsome-blog# Or using NPMnpx 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，页面数据内容
间接在<page-query> 标签内，应用 Graphql 语法，就能够间接获取数据，

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

HTML：

<h1>{{ $page.strapi.articles[0].title }}</h1>

注：
gridsome 中 layout 下default.vue 文件是全局默认援用，如果不想应用，能够起别名。

引申：
这个我的项目采纳的是 Graphql。
GraphQL 是一个用于 API 的查询语言，是一个应用基于类型零碎来执行查问的服务端运行时（类型零碎由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依附你现有的代码和数据撑持。
官网地址：https://graphql.cn/learn/quer...
1，根本应用
以下是你想要查问的数据。

{  hero {    name  }}

查问的后果是

{  "data": {    "hero": [        {            name: "test1"        },        {            name: "test2"        }    ]  }}