SolidStart - shadcn-solid 组件库

文档

SolidStart

安装并配置 SolidStart。

CLI (命令行界面)

创建项目

首先使用 create-solid 创建一个新的 SolidStart 项目，并选择 tailwind 或 uno

pnpm create solid@latest

路径别名

我使用 @ 别名来更轻松地导入组件。这是配置它的方法

tsconfig.json

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

app.config.ts

import { defineConfig } from "@solidjs/start/config";
import { dirname, resolve } from "node:path";
import { fileURLToPath } from "node:url";
 
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
 
export default defineConfig({
  vite: {
    resolve: {
      alias: {
        "@": resolve(__dirname, "./src")
      }
    }
  }
});

运行 CLI

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

npx 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/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.cjs
│
◇  Configure the import alias for components:
│  @/components
│
◇  Configure the import alias for utils:
│  @/lib/utils

完成了

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

npx shadcn-solid@latest add button

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

import { Button } from "@/components/ui/button"
 
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}