创建你的第一个 Astro 项目
准备好…
- 运行
create astro
安装向导来创建一个新的 Astro 项目 - 以开发 (dev) 模式启动 Astro 服务器
- 在浏览器中查看你网站的实时预览
启动 Astro 设置向导
段落标题 启动 Astro 设置向导创建新 Astro 站点的首选方法是通过我们的 create astro
设置向导。
-
在终端的命令行中,使用你首选的包管理器运行以下命令:
-
确认后安装
create-astro
-
当提示
Where would you like to create your new project?
(你想要在哪里创建你的新项目?)时输入文件夹的名称来为你的项目创建一个新目录,例如:./tutorial
新的 Astro 项目只能在一个完全空的文件夹中创建,因此请为你的文件夹选择一个尚不存在的名称!
-
你将看到一个简短的入门模板列表可供选择。使用方向键(上和下)导航至模板,然后按回车键(回车)选择对应模板。
-
当提示询问你是否打算编写 TypeScript 时,输入
n
(不打算)。 -
当提示询问
Would you like to install dependencies?
(你想现在安装依赖吗?)时输入y
(现在安装)。 -
当提示询问
Would you like to initialize a new git repository?
(你想要初始化一个新的 Git 仓库吗?)时输入y
(要初始化)。
安装向导完成后,你不再需要此终端。你现在可以打开 VS Code 继续。
在 VS Code 中打开你的项目
段落标题 在 VS Code 中打开你的项目-
打开 VS Code。系统将提示你打开一个文件夹。选择你在安装向导期间创建的文件夹。
-
如果这是你第一次打开 Astro 项目,你应该会看到一条通知,询问你是否要安装推荐的扩展。点击查看推荐扩展,选择 Astro 语言支持。这将为你的 Astro 代码提供语法提示和自动代码补全功能。
-
打开 VS Code 终端,可以看到类似如下提示:
按 Ctrl + J(macOS: Cmd ⌘ + J)在 VS Code 中打开终端。
你现在可以使用 VS Code 的内置的终端,而不是计算机自带的终端程序。
在开发模式下运行 Astro
段落标题 在开发模式下运行 Astro为了实时预览项目,你需要在开发 (dev) 模式下运行 Astro。
启动开发服务
段落标题 启动开发服务-
通过在 VS Code 的终端中输入以下命令来启动 Astro 开发服务:
现在你应该能在终端中看到 Astro 正在以开发模式运行的提示信息。🚀
查看你网站的预览
段落标题 查看你网站的预览你的项目文件包含显示 Astro 网站所需的所有代码,但浏览器负责将你的代码显示为网页。
-
点击终端窗口中的
localhost
链接,查看 Astro 网站的实时预览!(如果端口 4321 可用,Astro 默认使用
http://localhost:4321
。)以下是 Astro“初始项目”入门网站在浏览器预览中的样子:
当 Astro 服务器以开发模式运行时,你将无法在终端窗口中运行命令。相反,此窗格会在你预览站点时为你提供反馈。
你可以随时停止开发服务器并通过在终端中键入 Ctrl + C 返回到命令提示符。
有时开发服务器会在你工作时自行停止。如果你的实时预览停止工作,请返回终端并通过键入 npm run dev
重新启动开发服务器。
任务清单
段落标题 任务清单相关资源
段落标题 相关资源-
Visual Studio Code 入门 外部链接 — 用于安装、设置和使用 VS Code 的视频教程