Gridsome

Gridsome 是由Vue.js驱动的Jamstack框架，用于构建默认情况下快速生成的静态生成的网站和应用。

Jamstack使您可以通过预渲染文件并直接从CDN直接提供文件来构建快速安全的站点和应用程序，而无需管理或运行Web服务器。

Jamstack优点：

**

• 高性能：由于网页是静态生成的，没有额外的网络数据请求。
• 易部署：因为 JAMStack 不依赖 Web Server，部署就仅仅是把生成的网页放到 CDN 就可以了。
• 强安全：同样因为不依赖 Web Server 的原因，就导致 JAMStack 网站的攻击面很小。
• 易开发：JAMStack 由于其特性，开发也极其简单，不强依赖后端，开发、测试仅仅是部署到一个静态文件服务器即可。

**

Gridsome简单原理

Gridsome生成静态HTML，一旦加载到浏览器中，该HTML就会渗入Vue SPA。这意味着您可以使用Gridsome构建静态网站和动态应用程序。

Gridsome为每个页面构建一个.html文件和一个.json文件。加载第一页后，它仅使用.json文件来预取和加载下一页的数据。它还为需要它的每个页面构建一个.js包（代码拆分）。

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

Gridsome使用场景

• 不适合管理系统
• 简单页面展示
• 想要有更好的 SEO
• 想要有更好的渲染性能

简单实现

1、安装 Gridsome CLI

npm install --global @gridsome/cli// 查看是否成功
gridsome --version

2、创建 Gridsome 项目

gridsome create my-gridsome-site
cd my-gridsome-sitegridsome develop

3、目录结构

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

Gridsome配置

Gridsome项目配置文件

Gridsome需要 gridsome.config.js 才能工作

plugins里面放项目需要用到的插件

module.exports = {  siteName: 'Gridsome',  siteUrl: 'https://www.gridsome.org',  plugins: []}

Gridsome入口文件

src/main.js 是应用的入口文件，然后自动找首页 src/page/index

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创建页面

在Gridsome中创建页面有两种选择：

- 单文件组件

- 使用 Pages API 以编程方式创建页面

pages文件夹下面的文件会自动生成对应的路由

`src/pages/AboutUs.vue` becomes `/about-us/``src/pages/about/Vision.vue` becomes `/about/vision/``src/pages/blog/Index.vue` becomes `/blog/`

使用 Pages API 创建页面

可以使用 `gridsome.server.js` 中的 `createPages` 钩子以编程方式创建页面。

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

动态路由

和创建页面相似，可以用文件夹方式和Pages API创建

通过文件创建动态路由

`src/pages/user/[id].vue` becomes `/user/:id`.`src/pages/user/[id]/settings.vue` becomes `/user/:id/settings`.

通过编程方式创建动态路由

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

页面 meta 信息

Gridsome使用处理有关页面的元信息。

<template>  <div>    <h1>Hello, world!</h1>  </div></template><script>export default {  metaInfo: {    title: 'Hello, world!',    meta: [      { name: 'author', content: 'John Doe' }    ]  }}</script>

Collections 集合

集合是一组节点，每个节点都包含带有自定义数据的字段。

使用 source plugins 添加集合

将集合添加到 Gridsome 的最简单方法是使用源插件，源插件的 typeName 选项通常用于为插件添加的集合名称添加前缀。

module.exports = {  siteName: 'Gridsome',  plugins: [    {      use: "@gridsome/source-filesystem",      options: {        path: "static/projects/**/*.md",        typeName: "ProjectPost",        resolveAbsolutePaths: true,        remark: {          externalLinksTarget: "_blank",          externalLinksRel: ["nofollow", "noopener", "noreferrer"]        }      }    }
  ]
}

使用 Data Store API 添加集合

// gridsome.server.jsconst axios = require('axios')module.exports = function (api) {  api.loadSource(async actions => {    const collection = actions.addCollection('Post')    const { data } = await axios.get('https://api.example.com/posts')    for (const item of data) {      collection.addNode({        id: item.id,        title: item.title,        content: item.content      })    }  })}

页面查询数据

在页面可以将数据从GraphQL数据层查询到任何页面，模板或组件中。在Vue组件中，使用 `` 或 `` 块添加查询

• 在 Pages 和 Templates 中使用 ``

• 在 Components 中使用 ``

  query { posts: allWordPressPost { edges { node { id title } } }}