---
title: "Vite"
description: "在你的 Vite 项目中安装并配置 Tiptap UI 组件。"
canonical_url: "https://tiptap.zhcndoc.com/ui-components/install/vite"
---

# Vite

在你的 Vite 项目中安装并配置 Tiptap UI 组件。

使用下面的命令来搭建一个新的 Vite 项目。出现提示时，选择 `React + TypeScript`。

```bash
npm create vite@latest
```

## 配置 TypeScript 路径

Vite 将 TypeScript 配置拆分到了多个文件中。你需要同时更新 `tsconfig.json` 和 `tsconfig.app.json`。

在 `tsconfig.json` 中，将以下内容添加到 `compilerOptions` 内：

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

在 `tsconfig.app.json` 中更新以下 `compilerOptions`：

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

## 更新 Vite 配置

为了启用路径别名并避免 `__dirname` 类型错误：

安装 Node 类型定义：

```bash
npm install -D @types/node
```

然后编辑 `vite.config.ts`：

```ts
import path from 'path'

export default defineConfig({
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})
```

## 渲染编辑器

> **新项目仍然显示默认的 Vite 页面:**
>
> 脚手架会创建一个标准的 Vite + React 应用。添加组件时，会把它们作为源文件复制到
> `src/components/` 中，但在你自己渲染一个 Tiptap 组件之前，`src/App.tsx` 仍然会显示 Vite 的默认起始页面。
> 这是预期行为，不是安装失败。

将 `src/App.tsx` 的内容替换为你安装的模板或组件。例如，**Simple Editor** 模板：

```tsx
import { SimpleEditor } from '@/components/tiptap-templates/simple/simple-editor'

export default function App() {
  return <SimpleEditor />
}
```

启动开发服务器以查看你的编辑器：

```bash
npm run dev
```

## 添加 Tiptap 组件

使用 CLI 安装 Tiptap UI 组件。例如，添加 `HeadingButton` 组件：

```bash
npx @tiptap/cli@latest add heading-button
```

上面的命令将安装 `HeadingButton` 组件及其依赖项。然后你就可以在你的 **Tiptap** 项目中导入并使用它：

```tsx
import { HeadingButton } from '@/components/ui/heading-button'

export default function App() {
  // Tiptap ...

  return (
    <>
      <HeadingButton level={1}>标题 1</HeadingButton>
      <HeadingButton level={2}>标题 2</HeadingButton>
      <HeadingButton level={3}>标题 3</HeadingButton>
    </>
  )
}
```

## 添加样式

> **样式会自动添加:**
>
> 当你安装第一个 Tiptap UI 组件时，CLI 会自动将所需的
> .scss 导入添加到你的主样式表中。在大多数情况下，**不需要手动配置**。

在继续之前，请确保你的项目包含 CSS reset。
如果你正在使用 Tailwind CSS，你已经有了。

#### 样式的导入位置

CLI 会自动将样式导入注入到你的全局样式表中，例如：

- `src/index.css`（取决于你的项目）

如果你自定义了入口文件，请确保其中包含以下内容：

**文件：** `src/index.css`（取决于你的项目）

```css
@import '<path-to-styles>/_variables.scss';
@import '<path-to-styles>/_keyframe-animations.scss';
```

有关配置样式的更多信息，请参阅 [样式设置指南](https://tiptap.zhcndoc.com/ui-components/getting-started/style.md)。