文档
Astro

Astro

安装和配置 Astro。

创建项目

从创建一个新的 Astro 项目开始

npm create astro@latest

配置您的 Astro 项目

您将被问到一些问题来配置您的项目

- 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 添加到您的项目中

使用 Astro CLI 安装 React

npx astro add react

将 Tailwind CSS 添加到您的项目中

npx astro add tailwind

在 src 文件夹中创建一个 styles/globals.css 文件。

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

导入 globals.css 文件

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

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

更新 astro.config.mjs 并将 applyBaseStyles 设置为 false

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

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

编辑 tsconfig.json 文件

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

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

运行 CLI

运行 shadcn 初始化命令来设置您的项目

npx shadcn@latest init

就是这样

您现在可以开始将组件添加到您的项目中。

npx shadcn@latest add button

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

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