Docs
Astro

Astro

安装并配置 Astro。

创建项目

¥Create project

首先创建一个新的 Astro 项目：

¥Start by creating a new Astro project:

pnpm create astro@latest

配置你的 Astro 项目

¥Configure your Astro project

你将被问到几个问题来配置你的项目：

¥You will be asked a few questions to configure your project:

- Where should we create your new project? ./your-app-name
- How would you like to start your new project? Choose a template
- Do you plan to write TypeScript? Yes
- How strict should TypeScript be? Strict
- Install dependencies? Yes
- Initialize a new git repository? (optional) Yes/No

将 React 添加到你的项目

¥Add React to your project

使用 Astro CLI 安装 React：

¥Install React using the Astro CLI:

pnpm dlx astro add react

将 Tailwind CSS 添加到你的项目

¥Add Tailwind CSS to your project

pnpm dlx astro add tailwind

Create a styles/globals.css file in the src folder.

styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Import the globals.css file

在 src/pages/index.astro 文件中导入 styles/globals.css 文件：

¥Import the styles/globals.css file in the src/pages/index.astro file:

src/pages/index.astro
---
import '@/styles/globals.css'
---

Update astro.config.mjs and set applyBaseStyles to false

为了防止两次提供 Tailwind 基本样式，我们需要告诉 Astro 不要应用基本样式，因为我们已经将它们包含在我们自己的 globals.css 文件中。为此，请将 astro.config.mjs 中 tailwind 插件的 applyBaseStyles 配置选项设置为 false。

¥To prevent serving the Tailwind base styles twice, we need to tell Astro not to apply the base styles, since we already include them in our own globals.css file. To do this, set the applyBaseStyles config option for the tailwind plugin in astro.config.mjs to false.

astro.config.mjs
export default defineConfig({
  integrations: [
    tailwind({
      applyBaseStyles: false,
    }),
  ],
})

编辑 tsconfig.json 文件

¥Edit tsconfig.json file

将以下代码添加到 tsconfig.json 文件中以解析路径：

¥Add the following code to the tsconfig.json file to resolve paths:

tsconfig.json
{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

运行 CLI

¥Run the CLI

运行 shadcn init 命令来设置你的项目：

¥Run the shadcn init command to setup your project:

pnpm dlx shadcn@latest init

就是这样

¥That's it

你现在可以开始向你的项目添加组件。

¥You can now start adding components to your project.

pnpm dlx shadcn@latest add button

上面的命令将把 Button 组件添加到你的项目中。然后你可以像这样导入它：

¥The command above will add the Button component to your project. You can then import it like this:

---
import { Button } from "@/components/ui/button"
---
 
<html lang="en">
	<head>
		<title>Astro</title>
	</head>
	<body>
		<Button>Hello World</Button>
	</body>
</html>
RemixLaravel