gridsome -- 初识

简介

Gridsome是 静态站点生成器，用于构建性能卓越的网站。Gridsome的一个杀手级功能是它提供了GraphQL层，该层允许 从一个或多个API 查询数据。网站的静态页面可以在构建时使用不同的数据源动态生成。

Gridsome附带的一些强大功能

• 数据源（作为插件） -从CMS，Markdown文件 或 API 查询数据。
• Vue.js前端-Vue只是最好的，Gridsome可让您将其用作前端框架。
• 热重载开发 - 开发中预先配置的实时加载。
• GraphQL层 -一处管理所有数据源。
• 快速静态页面 -快速安全的站点部署。

Gridsome的工作方式

• 首先，让我们考虑一下数据。无论数据是存储在本地文件，CMS，某些外部API还是数据库中，Gridsome都允许您将其作为数据源引入 。
• 然后，使用GraphQL，所有这些不同的数据源都集成到一个可查询的接口中。您可以将其视为一个中央管理系统，该系统可以提取所有数据并将其提供给Vue组件。
• 在开发过程中，将实时查询所有这些数据源。这意味着在重新加载页面或进行更改时，将从其源中获取任何数据。但是，在构建生产站点时，将查询数据，并生成静态页面。生成的页面是随后 部署到服务器 或 CDN的页面。

整体流程

前期工作

---

• 安装 Gridsome CLI 工具

  • $ yarn global add @gridsome/cli

  • $ npm install --global @gridsome/cli

• 创建 Gridsome 项目

  • $ gridsome create myTest

  • $ cd myTest

  • $ gridsome develop

• 打开默认端口 http://localhost:8080，在浏览器中打开即可看到示例页面。

创建页面

---

• 在Page 下创建 Content.vue 文件 ，则生成对应的路由 /content 就可访问页面。
• 在Page 下创建 ContentPage.vue 文件 ，则生成对应的路由 /content-page 就可访问页面。

可以通过<g-link to="/content-page/"></g-link>标签去进行跳转访问

全局注册需要的组件

---

• 在 main.js 中进行注册

import DefaultLayout from '~/layouts/Default.vue'

export default function (Vue, { router, head, isClient }) {
  // Set default layout as a global component
  Vue.component('Layout', DefaultLayout)
}

• 在页面中也可以直接使用

页面中引入md 文档

---

• 安装插件

  • cnpm install @gridsome/source-filesystem -S
  • cnpm install @gridsome/remark-prismjs -S

• gridsome.config.js 中

plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        index: ['README'],
        path: './content/**/*.md',
        typeName: 'ContentPage',
        remark: {
          plugins: [
            '@gridsome/remark-prismjs'
          ]
        }
      }
    },
  ]

• path：文件的路径(对应的md文件)。
• typeName：GraphQL 类型和模板名称。 src/templates 中的 .vue 文件必须与 typeName 匹配才能为其具有模板。

新建md 文档

---

├── content/
	├── index.md
	├── git.md
└── src/    

获取md文档中的数据，在页面进行显示

---

• 首先在 Playground中测试数据是否能拿到
• 拿到数据后复制代码，粘贴至page 下的.vue页面中

<page-query>
{
  post:allContentPage{
    edges{
      node{
        id
        path
        content
      }
    }
  }
}
</page-query>

• 同时在 template 中进行渲染

<div v-for="edge in $page.post.edges" :key="edge.node.id">
  <h1>{{edge.node.id}}</h1>
  <div>{{edge.node.content}}</div>
</div>

• 但是目前不是以各个标签形式展现的，将切换一种写法

<div v-html="edge.node.content"/>

在MD 文件中引入组件 ？

---

• 安装插件

  cnpm install @gridsome/vue-remark -S

• gridsome.config.js 中配置

{
      use: '@gridsome/vue-remark',
      options: {
        index: ['README'],
        baseDir: './docs',
        pathPrefix: '/docs',
        typeName: 'DocPage',
        template: './src/templates/DocPage.vue',
        plugins: [
          '@gridsome/remark-prismjs'
        ],
        remark: {
          autolinkHeadings: {
            content: {
              type: 'text',
              value: '#'
            }
          }
        }
      }
    },

• typeName ( 必填)

  在GraphQL模式中提供页面的类型名称。

• baseDir (必填)

  包含所有.md文件的目录的路径。相对路径将从项目根目录解析。

• template 写模版具体的位置

• pathPrefix （默认： ‘/’）

  该baseDir选项指定的目录中第一级索引文件的路径将变为/。使用此选项为所有路径添加前缀。

使用

• 在md文档中引入组件

  import Button from '@/components/Button.vue'
  
  <div>
    <Button />
  </div>
  

• 对应在页面就会显示。