Astro

安装并配置 Astro。

创建项目

首先创建一个新的 Astro 项目


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

编辑 tsconfig.json 文件

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

tsconfig.json

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

运行 CLI

运行 shadcn 初始化命令以设置你的项目


pnpm dlx shadcn-vue@latest init

添加组件

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


pnpm dlx shadcn-vue@latest add button

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

src/pages/index.astro

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

<html lang="en">
    <head>
        <title>Astro</title>
    </head>
    <body>
        <Button>Hello World</Button>
    </body>
</html>

Nuxt Laravel

本页内容

创建项目编辑 tsconfig.json 文件运行 CLI 添加组件