Skip to content

Commit

Permalink
i18n(zh-cn): update install-and-setup.mdx (#9788)
Browse files Browse the repository at this point in the history 
Co-authored-by: Yan <[email protected]>
  • Loading branch information
@liruifengv @yanthomasdev
liruifengv and yanthomasdev authored Oct 24, 2024
1 parent 0be0f26 commit eefcb63
Showing 1 changed file with 50 additions and 49 deletions.
99 changes: 50 additions & 49 deletions src/content/docs/zh-cn/install-and-setup.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ title: 安装并设置 Astro
description: '如何安装 Astro 并开始一个新项目。'
i18nReady: true
---
import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components';
import { CardGrid, FileTree, LinkCard, Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import ReadMore from '~/components/ReadMore.astro';

[`create astro` CLI 命令](#通过-cli-向导安装) 是从零开始创建一个新的 Astro 项目的最快方式。它将引导你完成设置新 Astro 项目的每一个步骤，并允许你从几个不同的官方起始模板中选择。
Expand Down Expand Up @@ -33,26 +34,26 @@ Astro 使用 Vite 构建，Vite 默认针对支持现代 JavaScript 的浏览器
<Steps>
1. 在你的终端运行以下命令以启动我们的便捷安装向导：

<Tabs>
<TabItem label="npm">
<PackageManagerTabs>
<Fragment slot="npm">
```shell
# 使用 npm 创建一个新项目
npm create astro@latest
```
</TabItem>
<TabItem label="pnpm">
</Fragment>
<Fragment slot="pnpm">
```shell
# 使用 pnpm 创建一个新项目
pnpm create astro@latest
```
</TabItem>
<TabItem label="yarn">
</Fragment>
<Fragment slot="yarn">
```shell
# 使用 yarn 创建一个新项目
yarn create astro
```
</TabItem>
</Tabs>
</Fragment>
</PackageManagerTabs>

你可以在你的机器上的任何地方运行 `create astro`，因此在开始之前无需创建一个新的空目录。如果你还没有为你的新项目准备一个空目录，向导将会自动为你创建一个。

Expand All @@ -72,35 +73,35 @@ Astro 使用 Vite 构建，Vite 默认针对支持现代 JavaScript 的浏览器

2. 在你的终端运行以下命令，替换官方 Astro 起始模板的名称，或你想使用的 GitHub 用户名和仓库：

<Tabs>
<TabItem label="npm">
<PackageManagerTabs>
<Fragment slot="npm">
```shell
# 使用官方示例创建一个新项目
npm create astro@latest -- --template <example-name>

# 基于 GitHub 仓库的 main 分支创建一个新项目
npm create astro@latest -- --template <github-username>/<github-repo>
```
</TabItem>
<TabItem label="pnpm">
</Fragment>
<Fragment slot="pnpm">
```shell
# 使用官方示例创建一个新项目
pnpm create astro@latest --template <example-name>

# 基于 GitHub 仓库的 main 分支创建一个新项目
pnpm create astro@latest --template <github-username>/<github-repo>
```
</TabItem>
<TabItem label="yarn">
</Fragment>
<Fragment slot="yarn">
```shell
# 使用官方示例创建一个新项目
yarn create astro --template <example-name>

# 基于 GitHub 仓库的 main 分支创建一个新项目
yarn create astro --template <github-username>/<github-repo>
```
</TabItem>
</Tabs>
</Fragment>
</PackageManagerTabs>

默认情况下，此命令将使用模板仓库的 `main` 分支。如果要使用不同的分支名称，请在 `--template` 参数中指定：`<github-username>/<github-repo>#<branch>`。

Expand All @@ -121,23 +122,23 @@ Astro 自带了一个内置的开发服务器，它包含了项目开发所需

每个起始模板都预配置了一个脚本，该脚本将为你运行 `astro dev`。在进入你的项目目录后，使用你喜欢的包管理器运行此命令并启动 Astro 开发服务器。

<Tabs>
<TabItem label="npm">
<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm run dev
```
</TabItem>
<TabItem label="pnpm">
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm run dev
```
</TabItem>
<TabItem label="yarn">
</Fragment>
<Fragment slot="yarn">
```shell
yarn run dev
```
</TabItem>
</Tabs>
</Fragment>
</PackageManagerTabs>

如果一切顺利，Astro 将在 [http://localhost:4321/](http://localhost:4321/) 上为你的项目提供服务。在浏览器中访问该链接，查看你的新网站！

Expand Down Expand Up @@ -177,23 +178,23 @@ Astro 内置了对 [TypeScript](https://www.typescriptlang.org/) 的支持，它

若要检查将在构建时创建的网站版本，请退出开发服务器（<kbd>Ctrl</kbd> + <kbd>C</kbd>）并在你的终端中运行适用于你的包管理器的相应构建命令：

<Tabs>
<TabItem label="npm">
<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm run build
```
</TabItem>
<TabItem label="pnpm">
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm build
```
</TabItem>
<TabItem label="yarn">
</Fragment>
<Fragment slot="yarn">
```shell
yarn run build
```
</TabItem>
</Tabs>
</Fragment>
</PackageManagerTabs>

Astro 将在一个单独的文件夹（默认为 `dist/`）中构建你的网站的可部署版本，并且你可以在终端中看到其进度。这将在你部署到生产环境之前提醒你项目中的任何构建错误。如果 TypeScript 配置为 `strict` 或 `strictest`，`build` 脚本还将检查你的项目中的类型错误。

Expand Down Expand Up @@ -264,23 +265,23 @@ Astro 将在一个单独的文件夹（默认为 `dist/`）中构建你的网站

进入你的新目录后，创建你的项目 `package.json` 文件。这是你管理项目依赖项（包括 Astro）的方式。如果你不熟悉这种文件格式，请运行以下命令创建一个。

<Tabs>
<TabItem label="npm">
<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm init --yes
```
</TabItem>
<TabItem label="pnpm">
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm init
```
</TabItem>
<TabItem label="yarn">
</Fragment>
<Fragment slot="yarn">
```shell
yarn init --yes
```
</TabItem>
</Tabs>
</Fragment>
</PackageManagerTabs>

2. 安装 Astro

Expand All @@ -290,23 +291,23 @@ Astro 将在一个单独的文件夹（默认为 `dist/`）中构建你的网站
Astro 必须安装在本地，不能全局安装。确保你没有运行 `npm install -g astro`、`pnpm add -g astro` 或 `yarn add global astro`。
:::

<Tabs>
<TabItem label="npm">
<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm install astro
```
</TabItem>
<TabItem label="pnpm">
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm add astro
```
</TabItem>
<TabItem label="yarn">
</Fragment>
<Fragment slot="yarn">
```shell
yarn add astro
```
</TabItem>
</Tabs>
</Fragment>
</PackageManagerTabs>

然后，用以下内容替换你的 `package.json` 中的任何占位符 "scripts" 部分：

Expand Down

0 comments on commit eefcb63

Please sign in to comment.