跳转到内容

创建你的第一个 Astro 项目

准备好…

  • 运行 create astro 安装向导来创建一个新的 Astro 项目
  • 以开发 (dev) 模式启动 Astro 服务器
  • 在浏览器中查看你网站的实时预览

启动 Astro 设置向导

创建新 Astro 站点的首选方法是通过我们的 create astro 设置向导。

  1. 在终端的命令行中,使用你首选的包管理器运行以下命令:

    Terminal window
    # 使用 npm
    npm create astro@latest
  2. 确认后安装 create-astro

  3. 当提示 Where would you like to create your new project?(你想要在哪里创建你的新项目?)时输入文件夹的名称来为你的项目创建一个新目录,例如: ./tutorial

  4. 你将看到一个简短的入门模板列表可供选择。使用方向键(上和下)导航至模板,然后按回车键(回车)选择对应模板。

  5. 当提示询问 Would you like to install dependencies?(你想现在安装依赖吗?)时输入 y(现在安装)。

  6. 当提示询问你是否打算编写 TypeScript 时,输入 n(不打算)。

  7. 当提示询问 Would you like to initialize a new git repository?(你想要初始化一个新的 Git 仓库吗?)时输入 y(要初始化)。

安装向导完成后,你不再需要此终端。你现在可以打开 VS Code 继续。

在 VS Code 中打开你的项目

  1. 打开 VS Code。系统将提示你打开一个文件夹。选择你在安装向导期间创建的文件夹。

  2. 如果这是你第一次打开 Astro 项目,你应该会看到一条通知,询问你是否要安装推荐的扩展。点击查看推荐扩展,选择 Astro 语言支持。这将为你的 Astro 代码提供语法提示和自动代码补全功能。

  3. 打开 VS Code 终端,可以看到类似如下提示:

    Terminal window
    user@machine:~/tutorial$

你现在可以使用 VS Code 的内置的终端,而不是计算机自带的终端程序。

在开发模式下运行 Astro

为了实时预览项目,你需要在开发 (dev) 模式下运行 Astro。

启动开发服务

  1. 通过在 VS Code 的终端中输入以下命令来启动 Astro 开发服务:

    Terminal window
    npm run dev

    现在你应该能在终端中看到 Astro 正在以开发模式运行的提示信息。🚀

查看你网站的预览

你的项目文件包含显示 Astro 网站所需的所有代码,但浏览器负责将你的代码显示为网页。

  1. 点击终端窗口中的 localhost 链接,查看 Astro 网站的实时预览!

    (如果端口 4321 可用,Astro 默认使用 http://localhost:4321。)

    以下是 Astro “初始项目” 入门网站在浏览器预览中的样子:

    顶部带有 Astro 字样的空白白页。

任务清单

相关资源