🌐 Nodejs.cn

Astro

PreviousNext

安装并配置 Astro。

创建项目

🌐 Create project

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

🌐 Start by creating a new Astro project:

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

编辑 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-vue@latest init

添加组件

🌐 Add Components

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

🌐 You can now start adding components to your project.

pnpm dlx shadcn-vue@latest add button

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

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

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>
NuxtLaravel