通过命令行来自动安装 Astro

准备好安装 Astro 了吗？按照本指南开始使用 create astro CLI。

前提准备

Node.js - v18.17.1 或 v20.3.0 或更高版本。（不支持 v19。）
文本编辑器 - 我们建议使用安装有 Astro 官方扩展的 VS Code。
终端（Terminal） - Astro 可以通过其命令行界面 (CLI) 访问。

安装

create astro 是从头开始新 Astro 项目的最快方式。它将引导你完成设置新 Astro 项目的每一步。它允许你从几个不同的官方入门模板中进行选择，你也可以传递--template 参数来使用 GitHub 上的任何现有项目。

1. 运行安装向导

在你的终端中运行以下命令以启动我们方便的安装向导：

# 使用 npm 创建一个新项目
npm create astro@latest

# 使用 pnpm 创建一个新项目
pnpm create astro@latest

# 使用 yarn 创建一个新项目
yarn create astro

你可以在计算机上的任何位置运行 create astro，因此你无需在开始之前为你的项目创建一个新的空目录。如果你的新项目还没有空目录，该向导会帮你自动创建一个。

如果一切顺利的话，在一些建议的后续步骤之后，你应该会看到 “Liftoff confirmed. Explore your project!” 。 cd 进入你的新项目目录以开始使用 Astro。

如果你在 CLI 向导期间跳过了 npm install 步骤，请确保在继续之前安装你的依赖项。

2. 启动 Astro ✨

Astro 带有一个内置的开发服务器，拥有项目开发所需的一切。 astro dev 命令将启动一个本地开发服务器，这样你就可以第一次看到你的新网站正在运行。

每个入门模板都带有一个预配置的脚本，可以为你运行 astro dev。使用你最喜欢的包管理器运行此命令并启动 Astro 开发服务器。

npm run dev

pnpm run dev

yarn run dev

如果一切顺利，Astro 现在应该可以在 http://localhost:4321/ 上为你的项目提供服务了！

Astro 将实时监听 src/ 目录中的文件更改，因此你在开发过程中进行更改时无需重新启动服务器。

在浏览器中查看你的站点时，你可以访问 Astro 开发者工具栏。在你进行构建时，它将帮助你检查你的群岛、发现无障碍性问题等等。

如果你无法在浏览器中打开你的项目，请返回运行 dev 命令的终端并查看是否发生错误，或者检查你的项目的服务 URL 是否与上方链接的 URL 不同。

入门模板

你还可以通过将 --template 参数传递给 create astro 命令，基于官方示例或者任何 GitHub 存储库的main 分支来启动一个新的 astro 项目。

# 使用官方示例创建一个新项目
npm create astro@latest -- --template <example-name>

# 基于某个 GitHub 仓库的 main 分支创建一个新项目
npm create astro@latest -- --template <github-username>/<github-repo>

# 使用官方示例创建一个新项目
pnpm create astro@latest --template <example-name>

# 基于某个 GitHub 仓库的 main 分支创建一个新项目
pnpm create astro@latest --template <github-username>/<github-repo>

# 使用官方示例创建一个新项目
yarn create astro --template <example-name>

# 基于某个 GitHub 仓库的 main 分支创建一个新项目
yarn create astro --template <github-username>/<github-repo>

默认情况下，此命令将使用模板仓库的main分支。要使用不同的分支，请将其作为 --template 参数的一部分传递：<github-username>/<github-repo>#<branch>。

探索我们的主题和入门展示，你可以在其中浏览博客、个人作品集、文档、落地页等主题！或者，在 GitHub 上搜索更多入门项目。

接下来…

好了！你现在可以开始使用 Astro 进行构建了！ 🥳

以下是我们建议接下来探索的几个主题，你可以按任何顺序阅读它们。你甚至可以暂时离开我们的文档去玩转你的新 Astro 项目代码库，当你遇到麻烦或有疑问时，欢迎你随时返回这里。

了解你的代码库在我们的项目结构指南中了解更多关于 Astro 项目结构的信息。

添加框架在我们集成指南中学习如何扩展 Astro 以支持 React、Svelte、Tailwind 等。

部署你的网站在我们的部署指南中了解如何构建 Astro 项目并将其部署到网络。

编辑此页 Translate

Contribute

Community