Gridsome入门

Keranalice
642 阅读5分钟

一、介绍

Gridsome是一个免费、开源、基于Vue.js技术栈的静态网站生成器。
官方网站 GitHub

什么是静态网站生成器？

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

常见的静态网站生成器：

  • Jekyll(Ruby）
  • Hexo(Node)
  • Hugo(Golang)
  • Gatsby(Node/React)
  • Gridsome(Node/Vue)
  • 另外，Next.js，Nuxt.js也能生成静态网站，但是他们更多被认为是SSR(服务端渲染)框架。 这类静态网站生成器还有一个漂亮的名字叫JAMStack，JAMStack的JAM是 JavaScript、API、和Markup的首字母组合，本质上是一种胖前端，通过调用各种API来实现更多的功能，通过预渲染文件并直接从CDN直接提供文件来构建快速安全的站点和应用程序，而无需管理或运行Web服务器。

静态应用的使用场景？

  • 简单页面展示，例如：博客、企业的宣传站
  • 想要有更好的渲染性能 不适合有大量路由页面的应用，预渲染将非常缓慢；不适合有大量动态内容的应用例如：后台管理系统，到处都是增删改查。

Gridsome是如何工作的？

Gridsome生成静态HTML，一旦加载到浏览器中，该HTML就会渗入Vue SPA。Gridsome为每个页面构建一个.html文件和一个.json文件。
加载第一页后，它仅使用.json文件来预取和加载下一页的数据。它还为需要它的每个页面构建一个.js包(代码拆分)。 它使用vue-router进行SPA路由，并使用vue-meta来管理<head>。
Gridsome默认添加最小57kB的gzip JS捆绑包大小(vue.js, vue-router, vue-meta和一些用于图像延迟加载的文件）。

二、创建Gridsome项目

1、安装 Gridsome CLI

# 使用 yarn
yarn global add @gridsome/cli

# 使用 npm
npm install --global @gridsome/cli


# 查看是否安装成功
gridsome --version

2、创建 Gridsome 项目

# 创建项目
gridsome create my-gridsome-site

# 进入项目中
cd my-gridsome-site

# 启动开发模式，或 npm run develop
gridsome develop

gridsome 项目安装依赖注意事项：

3、目录结构

├── src
│   ├── components # 公共组件
│   ├── layouts # 布局组件
│   ├── pages # 页面路由组件
│   ├── templates # 模板文件
│   ├── favicon.png # 网站图标
│   └── main.js # 应用入口
├── static # 静态资源存储目录，该目录中的资源不做构建处理
├── README.md
├── gridsome.config.js # 应用配置文件
├── gridsome.server.js # 针对服务端的配置文件
├── package-lock.json
└── package.json

4、自己试一试

  • 在 src/pages 目录中创建一个 .vue 组件

5、构建

gridsome build

构建结果默认输出到 dist 目录中。 Gridsome 会把每个路由文件构建为独立的 HTML 页面。

6、部署

可以把构建结果 dist 放到任何 Web 服务器中进行部署。
例如我们这里使用 Node.js 命令行工具 serve 来测试构建结果。

npm install -g serve

serve dist

或者可以部署到其它第三方托管平台：gridsome.org/docs/deploy…
抑或是自己的服务器。

三、核心概念

Pages

通过在src/pages 文件夹中添加Vue组件来创建页面。他们使用基于文件的路由系统。例如，src/pages/About.vue将是 mywebsite.com/about/。页面用于简单页面和列出集合的页面（例如/blog/）。 了解更多关于页面的信息

Collections

如果您要在网站上放置博客文章，标签，产品等，则集合很有用。可以使用Source插件或Data Store API从任何Headless CMS，内容API或者Markdown文件中获取集合。 集合存储在临时的本地GraphQL数据层中，可以在任何地方查询，过滤，分页。

Templates

模板负责显示集合的节点（单个页面）。模板通常位于src/templates中。如果未在模板配置中指定组件，则Gridsome尝试查找与集合名称相同的文件。 例子：

<!-- src/templates/Post.vue -->
<template>
  <Layout>
    <h1 v-html="$page.post.title" />
  </Layout>
</template>

<page-query>
query ($id: ID!) {
  post(id: $id) {
    title
  }
}
</page-query>

更多关于 Templates 的内容

Layouts

布局是在页面和模板内部用于包装内容的Vue组件。布局通常包含页眉和页脚。 页面中通常按一下方式使用布局：

<template>
  <Layout>
    <h1>About us</h1>
  </Layout>
</template>

<script>
import Layout from '~/layouts/Default.vue'

export default {
  components: {
    Layout
  }
}
</script>

也可以在全局范围内使用布局，无需每页导入它们。 请注意，Gridsome Cli创建的默认模板将使用全局布局组件。 了解更多关于Layouts的内容

Images

Gridsome具有内置的<g-image>组件，可输出优化的逐行图像。如果更改宽度和高度，则在开发时还可以实时调整大小和剪裁。<g-images>创建一个超小型模糊的嵌入式base64图像，然后在视图中使用IntersectionObserver延迟加载图像。
了解更多关于Images的内容

Linking

Gridsome具有内置的<g-link>组件，该组件在查看链接时使用IntersectionObserver来预取链接的页面，这使得Gridsome站点中浏览非常快。
了解更多关于<g-link>的内容

以上内容来是我近期学习“拉勾教育-前端高薪训练营”课程的笔记。如果你和我一样从事前端开发工作，并且同样正处于升职加薪的瓶颈期，我诚恳的邀请你和我一起加入“拉勾教育-前端高薪训练营”课程的学习。课程内容设置很丰富，讲师讲解非常详细，班主任殷勤督促学习，更有摸鱼群的小伙伴们作伴儿，学习，工作一改往日的苦逼，乏味。如果你对课程还有其他问题，可以给我留言或者扫描文末的二维码添加我为好友。

后续还会不断分享学习和工作中的收获，关注作者不迷路哦~码字不易，如果上文对你有所帮助，欢迎一键三连😘

avatar
文章
阅读
粉丝