Shadcn UI

从零开始使用 Shadcn UI。

1- 前期准备

1.1- 1. 安装 Node.js 和 npm

Node.js 是一个 JavaScript 运行环境，而 npm 是 Node.js 的包管理工具。你需要先安装它们：

• 下载 Node.js：访问 Node.js 官方网站，下载并安装最新的 LTS 版本。安装 Node.js 时会自动安装 npm。

1.2- 2. 安装 Visual Studio Code

Visual Studio Code（VS Code）是一个流行的代码编辑器。你可以从其官方网站下载并安装。

2- 创建 React 项目

2.1- 1. 创建项目文件夹

在你的电脑上创建一个新的文件夹，例如 my-shadcn-app。

2.2- 2. 打开终端

在 Windows 上，你可以使用命令提示符（CMD）或 PowerShell。在 Mac 和 Linux 上，你可以使用终端。

2.3- 3. 初始化项目

在终端中，导航到你创建的文件夹，然后运行以下命令来初始化一个新的 React 项目：

npx create-react-app my-shadcn-app

这将创建一个名为 my-shadcn-app 的新文件夹，并在其中生成一个基础的 React 项目。

2.4- 4. 进入项目文件夹

cd my-shadcn-app

3- 安装 Shadcn UI 和 Tailwind CSS

3.1- 1. 安装 Shadcn UI

在终端中运行以下命令：

npm install @shadcn/ui

3.2- 2. 安装 Tailwind CSS

按照 Tailwind CSS 的官方文档进行安装和配置：

npm install -D tailwindcss
npx tailwindcss init

3.3- 3. 配置 Tailwind CSS

在项目根目录下找到 tailwind.config.js 文件，并进行如下配置：

module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@shadcn/ui/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

3.4- 4. 引入 Tailwind CSS 样式

在 src 文件夹中找到 index.css 文件，并添加以下内容：

@tailwind base;
@tailwind components;
@tailwind utilities;

4- 使用 Shadcn UI 组件

4.1- 1. 创建一个简单的组件

在 src 文件夹中找到 App.js 文件，并将其内容替换为以下代码：

import React from 'react';
import { Button } from '@shadcn/ui';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Button>点击我</Button>
      </header>
    </div>
  );
}

export default App;

4.2- 2. 运行项目

在终端中运行以下命令启动开发服务器：

npm start

打开浏览器，访问 http://localhost:3000，你应该能看到一个带有“点击我”按钮的页面。

5- 详细操作步骤

5.1- 1. 安装 VS Code 插件

为了提高开发效率，你可以在 VS Code 中安装以下插件：

• ESLint：帮助你保持代码风格一致。
• Prettier：自动格式化代码。
• Tailwind CSS IntelliSense：提供 Tailwind CSS 的智能提示。

5.2- 2. 创建更多组件

你可以在 src 文件夹中创建一个新的文件夹 components，并在其中创建新的组件文件。例如，创建一个 MyButton.js 文件：

import React from 'react';
import { Button } from '@shadcn/ui';

const MyButton = () => {
  return <Button>自定义按钮</Button>;
};

export default MyButton;

然后在 App.js 中引入并使用这个新组件：

import React from 'react';
import MyButton from './components/MyButton';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <MyButton />
      </header>
    </div>
  );
}

export default App;

5.3- 3. 学习基础 HTML 和 CSS

为了更好地理解和使用 Shadcn UI，你可以学习一些基础的 HTML 和 CSS 知识。这将帮助你更好地定制和调整组件的样式。

通过以上步骤，你应该能够从零开始使用 Shadcn UI 并创建简单的 React 应用。如果你遇到问题，可以参考官方文档或社区资源获取帮助