创建你的第一个 Astro 项目
准备好…
- 运行
create astro安装向导来创建一个新的 Astro 项目 - 以开发 (dev) 模式启动 Astro 服务器
- 在浏览器中查看你网站的实时预览
启动 Astro 设置向导
Section titled “启动 Astro 设置向导”创建新 Astro 站点的首选方法是通过我们的 create astro 设置向导。
-
在终端的命令行中，使用你首选的包管理器运行以下命令：
终端窗口 # 使用 npm 创建新项目npm create astro@latest终端窗口 # 使用 pnpm 创建新项目pnpm create astro@latest终端窗口 # 使用 yarn 创建新项目yarn create astro -
输入
y以安装create-astro。 -
当提示你想要在哪里创建你的新项目时，输入文件夹的名称来为你的项目创建一个新目录，例如：
./tutorial -
你会看到一个简短的入门模板列表。使用方向键（上下键）导航到 minimal（空白）模板，然后按下回车键（Enter）确认你的选择。
-
当提示询问你是否要安装依赖项时，输入
y。 -
当提示询问你是否要初始化一个新的 Git 仓库时，输入
y。
安装向导完成后，你不再需要此终端。你现在可以打开 VS Code 继续。
在 VS Code 中打开你的项目
Section titled “在 VS Code 中打开你的项目”-
打开 VS Code。系统将提示你打开一个文件夹。选择你在安装向导期间创建的文件夹。
-
如果这是你第一次打开 Astro 项目，你应该会看到一条通知，询问你是否要安装推荐的扩展。点击查看推荐扩展，选择 Astro 语言支持。这将为你的 Astro 代码提供语法提示和自动代码补全功能。
-
打开 VS Code 终端，可以看到类似如下提示：
终端窗口 user@machine:~/tutorial$
你现在可以使用 VS Code 的内置的终端，而不是计算机自带的终端程序。
在开发模式下运行 Astro
Section titled “在开发模式下运行 Astro”为了实时预览项目，你需要在开发 (dev) 模式下运行 Astro。
启动开发服务
Section titled “启动开发服务”-
通过在 VS Code 的终端中输入以下命令来启动 Astro 开发服务：
终端窗口 npm run dev终端窗口 pnpm run dev终端窗口 yarn run dev现在你应该能在终端中看到 Astro 正在以开发模式运行的提示信息。🚀
查看你网站的预览
Section titled “查看你网站的预览”你的项目文件包含显示 Astro 网站所需的所有代码，但浏览器负责将你的代码显示为网页。
-
点击终端窗口中的
localhost链接，查看 Astro 网站的实时预览！（如果端口 4321 可用，Astro 默认使用
http://localhost:4321。）以下是 Astro“初始项目”入门网站在浏览器预览中的样子：
-
Visual Studio Code 入门 外部链接 — 用于安装、设置和使用 VS Code 的视频教程