使用 Gridsome 构建静态生成的网站和应用使用Vue.js，webpack和Node.js等现代工具构建网站。通过

Gridsome 是什么

GitHub 仓库：github.com/gridsome/gr…

官网：gridsome.org/

Gridsome 是由Vue.js驱动的Jamstack框架，用于构建默认情况下快速生成的静态生成的网站和应用
Gridsome是Vue提供支持的静态站点生成器，用于为任何无头CMS，本地文件或API构建可用于CDN的网站
使用Vue.js，webpack和Node.js等现代工具构建网站。通过npm进行热重载并访问任何软件包，并使用自动前缀在您喜欢的预处理器（如Sass或Less）中编写CSS
基于 Vue.js 的 Jamstack 框架
Gridsome 使开发人员可以轻松构建默认情况下快速生成的静态生成的网站和应用程序
Gridsome允许在内容里面引用任何CMS或数据源
从WordPress，Contentful或任何其他无头CMS或API中提取数据，并在组件和页面中使用GraphQL访问它

为什么选择 Gridsome

Vue.js for frontend - The simplest & most approachable frontend framework.
Data sourcing - Use any Headless CMSs, APIs or Markdown-files for data.
Local development with hot-reloading - See code changes in real-time.
File-based page routing - Any Name.vue file in src/pages is a static route.
Dynamic routing - Any [param].vue file in src/pages is a dynamic route.
Static file generation - Deploy securely to any CDN or static web host.
GraphQL data layer - Simpler data management with a centralized data layer.
Automatic Code Splitting - Builds ultra performance into every page.
Plugin ecosystem - Find a plugin for any job.

什么是 Jamstack

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

Learn more about the Jamstack.

它是如何工作的

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

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

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

Gridsome默认添加最小57kB的gzip JS捆绑包大小（vue.js，vue-router，vue-meta和一些用于图像延迟加载的文件）。

详细了解其工作原理

学习条件

您应该具有有关HTML，CSS，Vue.js以及如何使用终端的基本知识。了解GraphQL的工作原理是有好处的，但不是必需的。 Gridsome是学习它的好方法。

Gridsome 需要Node.js（v8.3 +），并建议使用 Yarn。

备选方案

使用场景

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

使用 Gridsome 创建项目的基本结构

1. 安装 Gridsome CLI 工具

使用YARN安装:yarn global add @gridsome/cli
使用NPM安装:npm install --global @gridsome/cli

2. 创建一个 Gridsome 项目

gridsome create 你的项目名字
cd 你的项目名字
npm run develop 去打开项目在 http://localhost:8080

注意这里直接使用 gridsome create 你的项目名字 会安装失败
因为gridsome它自身依赖了一个特殊的第三方包：sharp，这个包是用来处理图片的

sharp安装失败的原因：
1、sharp 里面包含c++文件，在安装的时候，需要进行编译，编译后才能安装，所以要有一个c++编译环境才行
2、sharp这个包自身有依赖了一个包：libvips，libvips这个包很大，由于国内的限制，很难下载成功

解决sharp安装失败的办法：

把下面2个命令在自己电脑的命令行工具内执行

npm config set sharp_binary_host "https://npm.taobao.org/mirrors/sharp"
npm config set sharp_libvips_binary_host "https://npm.taobao.org/mirrors/sharp- libvips"

配置 node-gyp 编译环境，用来编译sharp 里面包含的c++文件

node-gyp的github地址： github.com/nodejs/node…
1、安装 node-gyp,在自己电脑的命令行工具内执行 npm install -g node-gyp
2、如果是windows系统：查看Installation下的On Windows选项进行安装配置就可以了,在安装windows-build-tools工具的时候，这个工具至少要有4.6G的磁盘空间才能安装成功
2、如果是macOS系统：查看Installation下的On macOS选项进行安装配置就可以了
2、如果是Unix系统：查看Installation下的On Unix选项进行安装配置就可以了
3、安装 Python， Python 官网: www.python.org/downloads/