Gridsome CLI 工具使用指南

Gridsome 是一个基于 Vue.js 的静态站点生成器，而 @gridsome/cli 则是其官方提供的命令行工具，用于快速创建和管理 Gridsome 项目。本文将详细介绍如何使用这个 CLI 工具来提升开发效率。

CLI 工具安装

在开始使用 Gridsome 之前，需要先全局安装 CLI 工具。根据你使用的包管理器，可以选择以下任一命令：

npm install --global @gridsome/cli
# 或
yarn global add @gridsome/cli
# 或
pnpm install --global @gridsome/cli

安装完成后，可以通过运行 gridsome --version 来验证安装是否成功。

创建新项目

使用 CLI 工具创建新项目非常简单，基本命令格式为：

gridsome create <项目名称> [可选: 启动模板]

项目创建示例

1. 基础项目 - 创建一个默认配置的 Gridsome 项目：

   gridsome create my-website
   

2. 使用启动模板 - Gridsome 提供了一些官方模板，例如 WordPress 模板：

   gridsome create my-blog wordpress
   

常用启动模板

模板名称	创建命令示例
默认模板	gridsome create my-website
WordPress 模板	gridsome create my-blog wordpress

本地开发

进入项目目录后，运行以下命令启动开发服务器：

cd my-website
gridsome develop

开发服务器默认会在 http://localhost:8080/ 启动，并支持热重载功能，让你在修改代码后能立即看到变化。

GraphQL 数据探索

Gridsome 内置了 GraphQL 数据层，要探索你的数据结构和内容，可以运行：

gridsome explore

这会在 http://localhost:8080/___explore 启动 GraphQL Playground，你可以在这里：

• 查看完整的 GraphQL 模式
• 测试查询语句
• 探索可用的数据源

生产环境构建

当项目开发完成后，运行构建命令生成静态文件：

gridsome build

构建完成后，所有静态文件会被输出到项目根目录下的 dist 文件夹中，这些文件可以直接部署到任何静态网站托管服务上。

进阶使用技巧

1. 自定义端口 - 如果默认端口被占用，可以指定其他端口：

   gridsome develop -p 3000
   

2. 查看帮助 - 任何时候都可以查看 CLI 的帮助信息：

   gridsome --help
   

3. 项目信息 - 查看当前项目的 Gridsome 版本和配置：

   gridsome info
   

通过掌握这些 CLI 命令，你可以更高效地开发 Gridsome 项目，从创建到开发再到部署都能得心应手。