Day3 - Astro Series: Hello Astro World

Astro 系列文第三日：建构新专案

@ Astro

一个漂亮的渐变背景上面有一句标题：「构建新项目」

前言

前面提到 Astro 是如何构建页面的，像是将网页拆分成「组件」以及通过 Astro Island 的方式来构建网页，接着本章节就要来实际创建一个 Astro 项目了！

构建项目

前置准备

Astro 提供了自动构建项目的 CLI 工具，在构建项目之前会需要以下环境：

通过自动构建工具创建 Astro

Terminal window
npm create astro@latest
Terminal window
# 安装以下套件 create-astro@4.0.1？ 输入 y 继续
Need to install the following packages:
  create-astro@4.0.1
Ok to proceed? (y) y


# 要在哪里创建您的新项目？
   dir   Where should we create your new project?
         ./项目名称


# 要使用项目模板吗？ 1. 使用项目模板（推荐） 2. 使用博客模板 3. 不使用
   tmpl   How would you like to start your new project?
         > Include sample files (recommended)
         — Use blog template
         — Empty


# 要安装依赖套件吗（推荐）？
   deps   Install dependencies? (recommended)
         ● Yes  ○ No


# 要使用 TypeScript 吗？
   ts   Do you plan to write TypeScript?
         ● Yes  ○ No


# TypeScript 设置上应该多严格？ 1. 严格（推荐） 2. 最严格 3. 宽松
   use   How strict should TypeScript be?
         > Strict (recommended)
         — Strictest
         — Relaxed


# 初始化 Git Repo 吗？
git   Initialize a new git repository? (optional)
         ● Yes  ○ No

这样一个完整的 Astro 便完成了，整体项目会是这样的架构：

Terminal window
项目
├── .git # Git 相关文件
├── .vscode # vscode 相关文件
├── node_modules # NPM 依赖套件
├── public # 任何不希望经由 Astro 处理的文件
│   └── favicon.svg
├── src # 项目的代码
│   ├── pages
│   │   └── index.astro
│   └── env.d.ts
├── .gitignore
├── astro.config.mjs # Astro 的设置文件
├── package.json # NPM 相关记录
├── README.md # 项目描述文件
└── tsconfig.json # TypeScript 设置文件

public/ 文件夹

用于存放非源代码不想被 Astro 处理的文件，内容会被原封不动地放置到渲染出来的文件夹中。

src/ 文件夹

用于存放与项目源代码有关的文件，可以在这里通过文件夹来分类项目源代码。文件夹名称可以自由命名，常见的 src 文件夹结构会像是这样：

Terminal window
src/
├── components # 组件
├── content # 存放与 Content Collections 相关的文件
├── layouts # 布局用组件
├── pages # 页面用组件
└── styles # 项目样式

除了 src/pages/ 与 src/content/ 之外文件夹名称都可以随自己偏好命名，并且只有 pages 文件夹是必要存在的，因为该文件夹内的文件会被用于创建页面，稍后章节会介绍它们各自的用途，目前大致了解项目结构即可。

启动 Astro

常见会用到三个命令：开启开发服务器、渲染网页、预览已渲染网页。网页渲染出来默认会被存放到一个 dist 文件夹中。

Terminal window
# 开启开发服务器
npm run dev


# 渲染网页
npm run build


# 预览已渲染网页
npm run preview

总结

构建 Astro 项目非常简单，通过 CLI 工具很快就能设置好一个可运行的项目。如果你熟悉 Vite 的话这样的架构或许对你来说非常熟悉，因为 Astro 底层实际上就是使用 Vite 来制作的！

延伸阅读