Astro

创建项目

首先创建一个新的 Astro 项目

配置您的 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

在安装 React 时，对 CLI 提示的所有问题回答 Yes。

将 Tailwind CSS 添加到您的项目

在 `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 init 命令以设置您的项目

就是这样

您现在可以开始向项目中添加组件了。

上述命令会将 Button 组件添加到您的项目。然后您可以像这样导入它

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