本文已参与「新人创作礼」活动，一起开启掘金创作之路。

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

Gridsome 起步

本篇目标：快速了解 Gridsome 项目。

1、安装脚手架，创建项目，了解 Gridsome 的项目结构；

2、添加 .vue 文件；

3、Gridsome 项目打包，Gridsome 项目部署；

1、安装 Gridsome CLI

# 使用 yarn
yarn global add @gridsome/cli
​
# 使用 npm
npm install --global @gridsome/cli
​
​
# 查看是否安装成功
gridsome --version

2、创建 Gridsome 项目

# 创建项目
gridsome create my-gridsome-site
​
# 进入项目中
cd my-gridsome-site
​
# 启动开发模式，或 npm run develop
gridsome develop

gridsome 项目安装依赖注意事项：

• 配置 node-gyp 编译环境

  • github.com/nodejs/node…

• 配置环境变量：npm_config_sharp_libvips_binary_host 为 https://npm.taobao.org/mirrors/sharp-libvips/

  • github.com/lovell/shar…

  • developer.aliyun.com/mirror/NPM

  • npm.taobao.org/mirrors

  • sharp.pixelplumbing.com/install

    • 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"

• 配置 hosts：199.232.68.133 raw.githubusercontent.com

  • www.ipaddress.com/

3、目录结构

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

4、自己试一试

• 在 src/pages 目录中创建一个 .vue 组件

5、构建

gridsome build

构建结果默认输出到 dist 目录中。

Gridsome 会把每个路由文件构建为独立的 HTML 页面。

6、部署

可以把构建结果 dist 放到任何 Web 服务器中进行部署。

例如我们这里使用 Node.js 命令行工具 serve 来测试构建结果。

npm install -g serve
​
serve dist

或者可以部署到其它第三方托管平台：gridsome.org/docs/deploy…。

或是自己的服务器，都可以！