创建你的第一个 Astro 项目

准备好……

• 运行 create astro 设置向导来创建新的 Astro 项目

• 以开发 (dev) 模式启动 Astro 服务器

• 在浏览器中查看网站的实时预览

启动 Astro 设置向导

标题部分 启动 Astro 设置向导

¥Launch the Astro setup wizard

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

¥The preferred way to create a new Astro site is through our create astro setup wizard.

1. In the command line of your terminal, run the following command using your preferred package manager:

   npm

   # create a new project with npm
   npm create astro@latest -- --template minimal

   pnpm

   # create a new project with pnpm
   pnpm create astro@latest --template minimal

   Yarn

   # create a new project with yarn
   yarn create astro --template minimal

2. Confirm y to install create-astro

3. When the prompt asks you where to create the project, type in the name of a folder to create a new directory for your project, e.g. ./tutorial

   Note

   A new Astro project can only be created in a completely empty folder, so choose a name for your folder that does not already exist!

4. When the prompt asks you whether or not to install dependencies, type or select y.

5. When the prompt asks you whether or not to initialize a new git repository, type or select y.

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

¥When the install wizard is complete, you no longer need this terminal. You can now open VS Code to continue.

在 VS Code 中打开你的项目

标题部分 在 VS Code 中打开你的项目

¥Open your project in VS Code

6. Open VS Code. You will be prompted to open a folder. Choose the folder that you created during the setup wizard.

7. If this is your first time opening an Astro project, you should see a notification asking if you would like to install recommended extensions. Click to see the recommended extensions, and choose the Astro language support extension. This will provide syntax highlighting and autocompletions for your Astro code.

8. Make sure the terminal is visible and that you can see the command prompt, such as:

   user@machine:~/tutorial$

   Keyboard shortcut

   To toggle the visibility of the terminal, use Ctrl + J (macOS: Cmd ⌘ + J).

现在，在本教程的其余部分中，你可以使用此窗口中内置的终端，而不是计算机的终端应用。

¥You can now use the terminal built right into this window, instead of your computer’s Terminal app, for the rest of this tutorial.

在开发模式下运行 Astro

标题部分 在开发模式下运行 Astro

¥Run Astro in dev mode

为了在工作时以网站形式预览项目文件，你需要 Astro 在开发 (dev) 模式下运行。

¥In order to preview your project files as a website while you work, you will need Astro to be running in development (dev) mode.

启动开发服务器

标题部分 启动开发服务器

¥Start the dev server

9. Run the command to start the Astro dev server by typing into VS Code’s terminal:

   npm

   npm run dev

   pnpm

   pnpm run dev

   Yarn

   yarn run dev

   Now you should see confirmation in the terminal that Astro is running in dev mode. 🚀

查看你网站的预览

标题部分 查看你网站的预览

¥View a preview of your website

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

¥Your project files contain all the code necessary to display an Astro website, but the browser is responsible for displaying your code as web pages.

10. Click on the localhost link in your terminal window to see a live preview of your new Astro website!

    (Astro uses http://localhost:4321 by default if port 4321 is available.)

    Here’s what the Astro “Empty Project” starter website should look like in the browser preview:

    

Using the Astro dev server

While the Astro server is running in dev mode, you will NOT be able to run commands in your terminal window. Instead, this pane will give you feedback as you preview your site.

You can stop the dev server at any time and return to the command prompt by typing Ctrl + C in the terminal.

Sometimes the dev server will stop on its own while you are working. If your live preview stops working, go back to the terminal and restart the dev server by typing npm run dev.

清单

标题部分 清单

¥Checklist

• 我可以创建一个新的 Astro 项目。

• 我可以启动 Astro 开发服务器。

资源

标题部分 资源

¥Resources

• Getting Started with Visual Studio Code external — a video tutorial for installing, setting up and working with VS Code