返回介绍

通过命令行来自动安装 Astro

发布于 2024-06-05 21:19:57 字数 4519 浏览 0 评论 0 收藏 0

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

前提准备

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

安装

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

1. 运行安装向导

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

  • npm
  • pnpm
  • Yarn
# 使用 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
  • pnpm
  • Yarn
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
  • pnpm
  • Yarn
# 使用官方示例创建一个新项目
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 项目并将其部署到网络。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文