静态网站生成器Gridsome

最新推荐文章于 2024-08-08 07:53:36 发布

wsq_bsdn

最新推荐文章于 2024-08-08 07:53:36 发布

阅读量634

点赞数

分类专栏：训练营笔记文章标签：前端

本文链接：https://blog.csdn.net/wsq_bsdn/article/details/115950716

版权

本文介绍了静态网站生成器的概念，特别是重点讲解了基于Node.js和Vue.js的Gridsome。内容涵盖Gridsome的安装、页面及路由创建、Collections管理、数据获取、与Strapi集成以及环境变量配置和自动化部署。

摘要由CSDN通过智能技术生成

什么是静态网站生成器

静态网站生成器是使用一系列配置、模板以及数据、生成静态HTML文件及相关资源的工具，也叫预渲染。生成的网站不需要服务器，只要放到支持静态资源的 Web Server 或 CDN 上即可运行。

静态网站的好处

省钱：不需要专业的服务器，只要托管静态文件的空间即可
快速：不需要经过后端服务器处理，只传输内容
安全：没有后端程序的执行，更安全

常见的静态网站生成器

Jekyll(Ruby)
Hexo(Node)
Hugo(Golang)
Gatsby(Node/React)
Gridsome(Node/Vue)

Gridsome 的使用

全局安装Gridsome
运行命令gridsome create projectName 创建项目
yarn 安装依赖。
依赖安装时可能出现下面的错误，原因是由于网络限制有一些资源没有下载下来，使用可以翻墙的VPN即可解决这个问题。
yarn develop 开发环境下启动项目
项目启动之后能看到如下信息，8080端口是开发页面的访问地址，而___explore则是graphql数据查询工具界面。

Gridsome页面及路由

页面

gridesome的页面有两种生成方式：

在/src/pages/文件夹中创建页面组件文件，gridsome的文件系统会自动读取该文件夹中的文件作为页面，并自动生成路由，以文件名为路由。访问根路由时会访问Index.vue页面。
在gridsome.server.js中通过createPage方法创建页面。

页面的meta信息，在组件的metaInfo属性中配置

<template>
  <Layout>
    <h1>About us</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error doloremque omnis animi, eligendi magni a voluptatum, vitae, consequuntur rerum illum odit fugit assumenda rem dolores inventore iste reprehenderit maxime! Iusto.</p>
  </Layout>
</template>

<script>
export default {
      
  metaInfo: {
      
    title: 'About us'
  }
}
</script>

动态路由

通过文件系统实现，在文件名中通过"[params]"的方式来定义路由参数，文件系统会自动识别，并生成响应的路由。

在gridsome.server.js中通过createPage方法定义动态路由，可以通过()来使用正则表达式限定路由参数。

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

Gridsome Collections

Collections时gridsome管理的数据状态的方式。Collections的使用包括数据的获取和在组件中的应用。

数据的获取：通过在gridsome.server.js的api.loadSource中定义Collection，并向collection中添加数据。 gridsome.server.js在打包之前会执行，并将数据注入到页面，然后根据数据生成静态页面
```
// gridsome.server.js
const<
```