一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

【Gridsome + Strapi + GraphQL】开发博客应用

安装

1. 安装 Gridsome CLI 工具

YARN: yarn global add @gridsome/cli
NPM: npm install --global @gridsome/cli

2. 创建一个 Gridsome project

gridsome create my-gridsome-site 创建一个新的项目
cd my-gridsome-site 进入新建的文件中
gridsome develop 启动完毕之后访问 http://localhost:8080
🎉🙌 效果如下

页面新增

Gridsome会将 src 文件夹下的 page 页面生成对应的路由，也就是说不需要我们去进行特殊的配置

这里我们进行一些测试，看看是不是真的会自动生产路由

路径：src\pages\Foo.vue

<template>
    <div>
      Foo page
    </div>
</template>
<script>
export default {
  name: 'FooPage'
}
</script>

然后我们直接访问http://localhost:8080/foo

如我们预期！完美

Gridsome基础-目录结构

Gridsome项目中最需要我们了解的就是 src 文件夹下面的内容，而 src 文件夹下面最需要我们了解的又是： main.js文件

// This is the main.js file. Import global CSS and scripts here.
// The Client API can be used here. Learn more: gridsome.org/docs/client-api

import DefaultLayout from '~/layouts/Default.vue'

export default function (Vue, { router, head, isClient }) {
  // Set default layout as a global component
  Vue.component('Layout', DefaultLayout)
}

它是Gridsome项目的全入口，内容也比较简单加载了一个 layout 组件，并且全局注册了这个组件

`layout`组件

layout组件是一个非常简单的 Vue 组件，唯一比较奇怪的就是<static-query></static-query>的写法

<static-query>
query {
  metadata {
    siteName
  }
}
</static-query>

这个就是比较特殊一点，这个使用来查询 graphql 数据的:gridsome.org/docs/queryi…

Gridsome基础-项目配置

接下来我们主要给大家讲解以下gridsome.config.js的作用

推荐文档：gridsome.org/docs/config

其实没有太主要的，这个内容在文档中都可以查询到

Gridsome基础-Pages

通过节点或其他数据以编程方式创建页面。

这里我们使用 createPages 函数来进行创建，这个函数的特点就是：当在存储中更改节点时，将重新执行此挂钩的处理程序。未重新创建的页面将是收集的垃圾。

例子：

gridsome.server.js

api.createPages(({ createPage }) => {
    createPage({
      path: '/my-page',
      component: './src/templates/Mypage.vue'
    })
  })

src/templates/Mypage.vue

<template>
  <div>
    My page
  </div>
</template>
<script>
export default {
  name: 'MyPage'
}
</script>

重启服务

动态路由

动态页面用于客户端路由。路由参数可以通过在方括号中包装名称来放置在文件和目录名称中。

例如：

src / pages / user / [id] .vue成为/用户/：ID。
src / pages / user / [id] /settings.vue成为/用户/：ID /设置。

在构建时，这将生成用户/ _id.html和user / _id / settings.html，您必须具有重写规则以使其正常工作。

具有动态路由的页面具有比固定路由更低的优先级。

例如，如果您有/用户/ create and a / user /：ID路由，则将优先考虑/用户/创建路由。

例子： src\pages\user[id].vue

<template>
  <div>
    <h1>参数：{{ $route.params.id }}</h1>
  </div>
</template>
<script>
export default {
  name: 'UserPage'
}
</script>

访问效果：

用api的方式进行配置动态路由：

module.exports = function (api) {
  api.createPages(({ createPage }) => {
    createPage({
      path: '/user/:id(\\d+)',
      component: './src/templates/User.vue'
    })
  })
}

【Gridsome】开发博客应用