Astro

安装和配置 Astro。

创建项目 ​

首先创建一个新的 Astro 项目

bash
npm create astro@latest

配置您的 Astro 项目 ​

您会被要求回答几个问题来配置您的项目

txt
- Where should we create your new project?
./your-app-name
- How would you like to start your new project?
Choose a starter template (or Empty)
- Install dependencies?
Yes
- Do you plan to write TypeScript?
Yes
- How strict should TypeScript be?
Strict
- Initialize a new git repository? (optional)
Yes/No

将 Vue 添加到您的项目 ​

使用 Astro CLI 安装 Vue

bash
npx astro add vue

这将安装 vue 和 @astrojs/vue 作为依赖项，并在 astro.config.mjs 文件中自动设置它们。

安装 TypeScript ​

如果您遇到错误 Cannot find module 'typescript'，请继续将 TypeScript 作为开发依赖项安装，如 此处 所述

bash
npm install -D typescript

将 Tailwind CSS 添加到您的项目 ​

使用 Astro CLI 安装 Tailwind CSS

bash
npx astro add tailwind

这将安装 tailwindcss 和 @astrojs/tailwind 作为依赖项，并在您的 astro.config.mjs 文件中设置它们。它还会创建一个 tailwind.config.mjs 文件，其中包含必要的配置。

编辑 tsconfig.json 文件 ​

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

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

运行 CLI ​

运行 shadcn-vue 初始化命令以设置您的项目

bash
npx shadcn-vue@latest init

配置 components.json ​

您会被要求回答几个问题来配置 components.json

txt
Would you like to use TypeScript (recommended)? no / yes
Which framework are you using? Astro
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your tsconfig.json or jsconfig.json file? › ./tsconfig.json
Where is your global CSS file? › src/styles/globals.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config located? › tailwind.config.mjs
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Write configuration to components.json. Proceed? > Y/n

导入 globals.css 文件 ​

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

ts
---
import '@/styles/globals.css'
---

更新 astro tailwind 配置 ​

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

ts
export default defineConfig({
  integrations: [
    tailwind({
      applyBaseStyles: false,
    }),
  ],
})

就是这样 ​

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

bash
npx 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>
在 GitHub 上编辑此页面