基本命令
零碎笔记
-1 参考链接
和nuxt比较

经过尝试，文档和技术氛围国内跟不上，建议还是优先考虑 Nuxt

新技术QA
技术名称	Gridsome@0.7.23—2021-05-12
文档官网	https://gridsome.org/
作者、技术团队	不熟悉
能做解决什么问题	JAMstack for vue2.js
特点、优点	jamstack,vue2,ssg,插件优秀，内容源api或者源文件都可以，有roapmap
同类选型	nuxt（完整、名气）, vuepress(仅md)
缺点、踩坑注意	没中文文档，b站视频没有中文资源，社区讨论不多，vue3还在路上
宣传语	A Jamstack framework for Vue.js
选型关键词	vue,ssg,mit

注意：默认项目启动比较费劲，参考 https://juejin.cn/post/6897487792696524808 进行配置。之所以慢似乎是为了内置图片组件的渐进展示。

经过实践，进入依赖安装之后，可以取消，直接无脑 cnpm i 就能安装上。

提到 jamstack 和 vue，首先想到的就是 Nuxt，今天介绍另一个选型方案：gridsome

内容源可以来自 api、数据文件、Markdown文件，这一点上比 vuepress 舒服。官方维护了很多插件，看着还不错。

基本命令

列出几个命令：

# 安装全局依赖
npm i -g @gridsome/cli
# 创建项目
gridsome create demo
# 默认创建项目并执行安装，最后会构建依赖多半会卡住，直接取消
cnpm i
# 启动项目
npm run develop

注意：

发现卡住就使用 cnpm i 来完成安装。
零碎笔记

基本介绍不提

@gridsome/source-filesystem 内容源是文件
模板中，使用 <page-query> 获取graphQL 注入到 this.$page
server.js 中，通过 loadSource 异步获取数据并存入 collection 中，见下方
@gridsome/source-contentful 插件用来管理远程资源，有了数据再补充对应的模板

官方案例中有这样一段代码用来说明如何从api里获取数据：

module.exports = function (api) {
  api.loadSource(async ({ addCollection }) => {
    // Fetch data from APIs 从api中获取数据
    const { data } = await axios.get('https://any.api.com')
    // Create a new GraphQL Collection 创建一个collection
    const posts = addCollection('Post')
    // Add data to the new collection 把具体数据添加到 collection
    for (const item of data) {
      posts.addNode({
        id: item.id,
        title: item.title,
        date: item.date,
        content: item.content
      })
    }
  })
}