Astro

安装与配置 Astro。

创建项目 ​

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

pnpm createastro@latest astro-app  --template with-tailwindcss --install --add vue --git

编辑 tsconfig.json 文件 ​

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

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

运行 CLI ​

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

pnpm dlx shadcn-vue@latest init

添加组件 ​

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

pnpm dlx shadcn-vue@latest add button

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

astro
---
import { Button } from "@/components/ui/button"
---

<html lang="en">
	<head>
		<title>Astro</title>
	</head>
	<body>
		<Button>Hello World</Button>
	</body>
</html>
Edit this page on GitHub