Astro - shadcn-solid 组件库

文档

Astro

安装并配置 Astro。

CLI

创建项目

首先使用 create-astro 创建一个新的 Astro 项目

pnpm create astro@latest

配置您的 Astro 项目

系统会询问您一些问题来配置您的项目

- 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

将 Solid 添加到您的 Astro 项目

使用 Astro CLI 安装 Solid

pnpx astro add solid

将 Tailwind CSS 或 UnoCSS 添加到您的项目

Tailwind CSS

要安装 Tailwind CSS，请使用 Astro CLI

pnpx astro add tailwind

UnoCSS

如果您更喜欢 UnoCSS，请安装 UnoCSS

pnpm install -D unocss

然后在项目的根目录中创建 uno.config.ts

uno.config.ts

import { defineConfig } from 'unocss'
 
export default defineConfig({
  // ...UnoCSS options
})

最后将 UnoCSS 集成添加到 Astro 配置文件

astro.config.mjs

import { defineConfig } from 'astro/config'
import solidJs from "@astrojs/solid-js"
import UnoCSS from 'unocss/astro'
 
// https://astro.build/config
export default defineConfig({
  integrations: [
    solidJs(),
    UnoCSS(),
  ],
})

路径别名

我使用 @ 别名来简化组件的导入。这是您可以配置它的方式

tsconfig.json

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

运行 CLI

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

pnpx shadcn-solid@latest init

配置 components.json

系统会询问您一些问题来配置 components.json

◆  Which CSS framework would you like to use?
│  ● TailwindCSS
│  ○ UnoCSS
│
◇  Which color would you like to use as base color?
│  Slate
│
◇  Where is your global CSS file?
│  src/styles/app.css
│
◇  Would you like to use CSS variables for colors?
│  Yes
│
◇  Are you using a custom tailwind prefix eg. tw-? (Leave blank if not)
│
│
◇  Where is your tailwind.config.cjs located?
│  tailwind.config.mjs
│
◇  Configure the import alias for components:
│  @/components
│
◇  Configure the import alias for utils:
│  @/lib/utils

导入 globals.css 文件

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

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

更新 astro tailwind 配置

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

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

更新 tailwind.config.mjs

当运行 npx shadcn-ui@latest init 时，您的 tailwind content 配置将被覆盖。为了解决这个问题，将 module.exports 更改为 export default，并将 content 部分替换为以下代码，并添加到您的 tailwind.config.mjs 文件中

export default {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
}

就这样

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

npx shadcn-solid@latest add button

然后，您可以像这样在 Astro 中导入 shadcn 组件

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