一起养成写作习惯!这是我参与「掘金日新计划 · 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基础-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'
})
})
}