使用 Vue 和 Gridsome 构建静态站点

时间：2023-04-29 23:00:02 | 来源：网站运营

时间：2023-04-29 23:00:02 来源：网站运营

使用 Vue 和 Gridsome 构建静态站点：

静态站点介绍

静态网站生成器所做的事情也就是传统开发中所谓的「静态化渲染」，经常出现在一些 CMS 系统中。

它是预渲染的，但是和服务端渲染有所不同。具体差异可以看这篇文章，静态化与服务端渲染。

静态网站不需要服务端支持，只需要将静态生成的文件放到任意的文件托管服务器或者 CND 上即可。比如GitHub Pages 和阿里云 OSS 等。

静态网站的优点总结为：省钱、快速、安全。

省钱是值不需要完整的服务器，只需要文件托管服务求或者 CND，这类云服务的价格通常来说很便宜。

快速是指不需要调用后端 API 接口，也不需要服务端渲染时的数据填充和类似 MVVM 的客户端渲染，浏览器拿到的就是可以直接使用的 HTML、CSS 和 JavaScript。

安全是指没有后端服务的支持，理论上也就没有任何漏洞，网站上的任何链接都是静态内容。

常见的静态网站生成器有很多，比如 Ruby 的 Jekyll、Node 的 Hexo、Golang 的 Hugo、React 的 Gatsby、Vue 的 Gridsome 等等。

静态网站还有一个别名，叫做 JAMStack。JAM分别是 JavaScript、Api、Markup 的首字母组合。

静态化本质上是一种胖前端。它也是前后端的模式，只不过在生成静态网站后，前后端就不再有联系了。

在静态网站生成时，提供数据的后端可以来自多个服务，比如 RESTFul API、GraphQL、JSON 文件、无头 CMS 等等。

在静态网站运行时，静态网站需要的一些功能比如登陆、阅读量、收藏、点赞、评论等等可以来自不同的服务厂商，而不需要自己开发。除了使用专业服务外，另一种比较流行的方案是使用 serverless 自行开发，以此实现更高的客制化功能，比如腾讯云的云函数和阿里云的函数计算。

静态化的适用场景通常是纯内容、弱交互的网站。如果网站有大量动态内容，就不适合使用静态化渲染了。它在本质解决的问题就是提供极致的阅读体验。

静态站点框架 Gridsome 基础教程

Gridsome 是一个免费开源，基于 Vue.js 技术栈的静态网站生成器。使用 Gridsome 需要有一定的 Vue 基础和 GraphQL 基础。

安装、创建、启动 gridsome 项目

首先全局安装 gridsome 的命令行工具。

npm install --global @gridsome/cli然后使用 gridsome create <application-name> 命令创建项目。

gridsome create my-gridsome-site最后进入项目目录下，使用 npm run develop 或 gridsome develop 启动开发服务器。

cd my-gridsome-site && gridsome developgridsome 启动成功后会提示 3 个地址。

Site running at:- Local: http://localhost:8080/- Network: http://192.168.1.131:8080/Explore GraphQL data at: http://localhost:8080/___explore第一个是本地地址。

第二个是公网IP地址。

第三个是管理 GraphQL 数据的控制台地址。

预渲染

路由规则

打开项目，可以在 src/pages 目录下看到 Index.vue 和 About.vue 文件，这两个文件对应的就是页面中的 Home 页面和 About 页面。

在 girdsome 中，pages 目录下的每个 vue 文件都对应一个路由。

现在来添加第一个页面。

// src/pages FirstPage.vue<template> <div>hello,my first page</div></template><script>export default { name: "first-page",};</script>然后访问 http://localhost:8080/first-page，就可以看到对应的内容了。

编译项目

接下来我们将项目编译为静态内容。执行下面的命令。

gridsome buildgridsome 会在项目中创建 dist 目录，其中保存了所有的网页。每一个 vue 文件都会被渲染为纯 HTML 文件。这些文件都不会进行客户端渲染，而是由浏览器直接呈现。也不会有 vue 运行时等 JavaScript 资源。所以可以做到极致的访问速度。

部署项目

现在将 dist 目录部署到任意服务器中即可。

下面使用 npm 的 serve 模块启动项目。

全局安装 serve。

npm i serve -g启动项目。

serve dist

目录结构

src

layouts 目录中存放了全局的布局组件，在 main.js 中注册了 Layout 组件。用于设置页面的通用样式布局。

像一些全局的样式文件或者全局组件，都可以在 main.js 中引入。

pages 目录存放了与路由相对应的 vue 文件。

components 目录存放公共组件。

templates 目录中存放了 GraphQL Collection 的模板。

.temp 目录是 gridsome 在运行中生成的临时文件。

.cache

存放了缓存文件。

static

存放静态文件，一些不需要编译的文件，比如图片、字体等资源。

girdsome.config.js 和 gridsome.server.js

分别是客户端和服务端的配置文件，用于配置插件、设置站点全局信息、或者注入数据等等。

配置文件修改后需要重启开发服务器才可以生效。

Pages 页面

gridsome 支持两种创建页面的方式。一种是基于文件的方式，一种是编程的方式。

基于文件的方式

按照规则直接在 pages 目录下创建 vue 文件就可以生成页面。它有一些默认规则。

1. Index.vue 表示跟路径 /。
2. 驼峰命名法会转换为中横线命名法。比如 AboutUs.vue 生成 about-us。
3. 嵌套文件生成嵌套路由。比如 /about/vision 生成 about/vision。
4. 默认寻找 Index.vue。比如 src/pages/blog/Index.vue 生成 /blog/。

编程的方式

在 girdsome.server.js 文件中默认导出方法中进行配置。

module.exports = function (api) { api.createPage(({ createPage}) => { createPage({ path: "/my-page", component: "./src/templates/MyPage.vue" }) })}

动态路由

gridsome 支持动态路由，使用中括号包裹路由参数。

src/pages/user/[id].vue 生成 user/:id。

src/pages/user/[id]/settings.vue 生成 user/:id/settings。

无论是基于文件还是编程的方式，都支持动态路由。

页面 Meta 信息

gridsome 支持给每个页面设置不同的 meta 信息。在默认导出的对象中添加 metaInfo 属性，就可以生成 meta 信息。

export default { name: "first-page", metaInfo: { title: "Hello,World!", meta: [{ name: "authro", content: "John Doe" }], },};

自定义 404 页面

gridsome 提供了一个默认的 404 页面。

如果需要自定义 404 页面，可以创建 src/pages/404.vue 文件。这个文件可以取代默认的 404 页面。

Collections 集合

一个页面可以通过调用接口来获取数据动态填充页面。调用接口获取数据填充页面这个步骤可以放到客户端也可以放到服务端。

如果放到服务端，需要使用 gridsome 的 collections。

在 gridsome 的动态数据生成动态页面的设计中，有 Data Sources、Collections 和 Nodes 三个概念。

Data Sources 是指数据源，可以来自任意形式的 API 接口，比如 WordPress、JSON 或者 Markdown 等等。

Collections 是 girdsome 将数据源转换后的结果。

Nodes 是 collections 对应的节点，每一个 node 都会生成一个页面。

添加 Collections

创建 collections 有两种方式，第一种是使用插件的形式（source plugins），在 gridsome.config.js 中进行配置。第二种是使用代码调用接口的方式（Data Store API），在 gridsome.server.js 进行调用。

有一个开源的项目 jsonplaceholder。它是基于 JSON Server 和 LowDB 创建的，可以为我们提供免费的 Mock RESTful API 服务用于测试。

安装用于请求的 axios 模块。

npm i axios修改 gridsome.server.js 中的 loadSource 方法，去调用 jsonplaceholder 的 posts 加载数据。posts 接口提供了一百条 post 数据。

// gridsome.server.js// ...api.loadSource(async ({ addCollection }) => { const collection = addCollection('Post') const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts') for (const item of data) { collection.addNode({ id: item.id, title: item.title, content: item.content }) }})

查询 Collections

修改全局的配置需要重新启动服务，重新启动后可以进入 http://localhost:8080/___explore，这是 GraphQL 的控制台。

在控制台右侧有 DECS，其中包含了刚刚添加的 psot 和 allPost。

在左侧编辑 GraphQL 查询语句，点击运行，就可以从右侧的数据预览栏中看到查询结果。

比如查询 id 为 10 的文章数据。

query { post(id: 10) { id title content }}使用分页查询前 10 条数据以及总条数。

query { allPost(skip: 0, limit: 10, order: ASC) { totalCount edges { node { id title content } } }}

在页面和模板中获取 GraphQL 数据

使用 page-query 标签。page-query 和 template 标签是平级的。page-query 中直接编写 GraphQL 查询语句，可以设置变量。查询结果默认存入 $page 变量中。




<template> <div> <h1 v-html="$page.post.title" /> <div v-html="$page.post.content" /> </div></template><page-query>query ($id: ID!) { post(id: $id) { title content }}</page-query>

在组件中获取 GraphQL 数据

使用 static-query 标签，用法与 page-query 类似。查询结果放入 page变量中。¨G14G¨K41K使用static−query标签，用法与page−query类似。查询结果放入static 中。

<template> <div v-html="$static.post.content" /></template><static-query>query { post (id: "1") { content }}</static-query>

Templates 模板

模板专门用于渲染 nodes。创建 template 需要两步。

首先在 src/templates 中创建模板组件。

<template> <div> <h1 v-html="$page.post.title" /> <div v-html="$page.post.content" /> </div></template><page-query>query ($id: ID!) { post(id: $id) { title content }}</page-query>之后在 gridsome.config.js 中配置路由和模板组件。

module.exports = { templates: { Post: [ { path: '/post/:id', component: './src/templates/Post.vue' } ] }}如果想在 metaInfo 中获取 GraphQL 中的数据，可以将 mateInfo 设置为函数。

metaInfo() { return { title: this.$page.post.title, };}以上就是 Gridsome 基础教程的全部内容。

我们有一个免费的学习网站，提供了前端、Python 等免费课程。

目前还有一个 Vue 的培训课程。

如果我们所做的事情能对你有所帮助，那真的是太棒了！