GridSome(一)：介绍

最新推荐文章于 2026-06-21 14:03:59 发布

原创最新推荐文章于 2026-06-21 14:03:59 发布 · 3k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

初次见面请多关照

GridSome是一个基于Vue.js的开源框架，用于构建快速的静态网站和应用，采用GraphQL获取数据，支持代码拆分、资产优化等功能。它强调移动优先，提供快速加载体验，并在全球范围内免费托管。通过GridSome，可以实现与CMS分离的网站设计和构建。

背景

随着时间的推移，静态站点生成器的时代正在发生变化，许多很酷的工具正在被开发出来，以帮助促进 JAMStack 的发展，而开发人员正在接受这些工具。而 Gridome 就是创建快速网站的工具之一。

静态站点生成器：我们曾经做过的只有一些 CSS 的简单的 HTML 网站，没有任何形式的动态操作。

介绍

Gridsome 是一个由 Vue.js 提供支持的开源框架，用于构建快速的静态网站和应用程序。

Gridsome 自动将超性能构建到每个页面中，您可以进行代码拆分，资产优化，渐进式图像和链接预取。使用 Gridsome，默认情况下您可以获得几乎完美的页面速度得分。

Gridsome —— 使用 Vue.js 构建超快网站的 JAMstack 框架，集合了静态站点生成和利用第三方 API 进行客户端渲染的框架被称为 JAMstack。

JAM 指 JavaScript、API 和 Markup。

它是数据驱动的，这意味着它使用 GraphQL 层从不同的源获取数据，以便从它动态生成页面。

特点

1. 新的开发技术栈

Gridsome 使用的技术工具是现在最为广泛应用的，使用Vue.js，GraphQL和Webpack构建网站，接受度会更高。gridsome 包含了热重新加载和 Node.js 的所有功能。

官方号称 Gridsome 使用 Vue.js 和 GraphQL 构建超快的网站。

2. 引用自己的数据

Gridsome 允许在内容里面引用任何 CMS 或数据源。
从 WordPress，Contentful 或任何其他无头 CMS 或 API 中提取数据，并在组件和页面中使用 GraphQL 访问它。

3. 移动优先框架

Gridsome 首先只加载关键的 HTML，CSS 和 JavaScript，然后在后台预取下一页，这样用户可以非常快速地点击，无需重新加载页面，离线也是如此。

4. 快速加载

Gridsome 会自动优化前端加载并快速执行。
可以 code-splitting, asset optimisation, lazy-loading, 以及近乎完美的 Lighthouse scores out-of-the-box。

5. 全球性免费范围拓展

Gridsome 的站点可以完全托管在 CDN 上，可以处理数千到数百万次点击而不会中断，并且不需要昂贵的服务器成本。

除了上面的特点，可以设计和构建与 CMS 分离的网站。也就是可以轻松更改 CMS 或测试完整的重新设计，而不会破坏我们的网站。

工作原理

一旦加载到浏览器中，Gridsome 就会生成静态 html，注入Vue 单页面应用中。也就意味着我们可以使用 Gridsome 构建静态网站和动态应用程序。

Gridsome 为每个页面构建一个 .html 文件和一个 .json 文件。加载第一页后，它只使用 .json 文件为下一页预取和加载数据，它还为每个需要它的页面构建了一个.js 包。

它使用 vue-router 进行 SPA 路由，并使用 vue-meta 进行管理 <head>。

Gridsome 默认会添加一个 57kB min gzip 大小的 JS 包（vue.js，vue-router，vue-meta 以及一些图像懒加载）

Gridome 是一个网站框架，使我们能够创建快速的静态站点，它的工作方式是从数据源 (如 CMS、本地文件或外部 API) 获取数据，并将数据存储在本地数据库中。GraphQL 是一个集中的数据管理系统，它管理数据，使我们能够提取和使用 vue 组件中的数据。对于开发环境，Gridome 提供了一个命令 gridsome develop，它以热加载和 GraphQL 数据层来启动本地服务器。对于生产环境， gridsome build 命令通过捆绑和生成 HTML 文件来构建网站，这些 HTML 文件可以托管并部署到任何全局 CDN 或 FTP 中。

Gridsome的使用

$ npm install -g @gridsome/cli   #安装gridsome脚手架
$ gridsome create awesome-site   #创建一个新项目
$ cd awesome-site                #打开文件夹
$ gridsome develop               #在http://localhost:8080启动本地开发服务器

接下来，只需要编写我们自己的代码即可！

目录结构

.
├── package.json
├── gridsome.config.js
├── gridsome.server.js
├── static/
└── src/
    ├── main.js
    ├── index.html
    ├── App.vue
    ├── layouts/
    │   └── Default.vue
    ├── pages/
    │   ├── Index.vue
    │   └── Blog.vue
    └── templates/
        └── BlogPost.vue