Vite

开始使用

在 Vite.js 项目中使用 Chakra UI 的安装指南。

AI 提示

想要跳过文档？可以使用我们的 Agent Skills。

模板

使用下面的 vite 模板可快速开始。

Vite 模板

前往查看

安装

提示

所需的最低 Node.js 版本为 Node.20.x。

安装依赖

npm i @chakra-ui/react @emotion/react

添加代码片段（Snippets）

代码片段是一些预构建的组件组合，可帮助你更快地搭建 UI。使用 @chakra-ui/cli 就能把代码片段添加到项目中。

npx @chakra-ui/cli snippet add

更新 tsconfig

如果你使用 TypeScript，请在 tsconfig.app.json 文件中，确保 compilerOptions 包含以下内容：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "skipLibCheck": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

如果你使用 JavaScript，请创建一个 jsconfig.json 文件，并将上面的代码写入其中。

配置 Provider

在应用的根部，用 Provider 组件包裹整个应用。

该 Provider 组合了以下内容：

来自 @chakra-ui/react 的 ChakraProvider，用于样式系统
来自 next-themes 的 ThemeProvider，用于颜色模式

// src/main.tsx
import { Provider } from "@/components/ui/provider"
import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Provider>
      <App />
    </Provider>
  </React.StrictMode>,
)

配置 Vite 路径（Config Paths）

在项目中，设置一个 vite 配置路径，以自动让 tsconfig 与 vite 保持同步。

更新 vite.config.ts 文件：

// vite.config.ts
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react()],
  resolve: {
    tsconfigPaths: true,
  },
})

如果你使用的是 Vite 7 或更低的版本，请安装 vite-tsconfig-paths 插件，而不是使用 resolve.tsconfigPaths。

npm i -D vite-tsconfig-paths

// vite.config.ts
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
import tsconfigPaths from "vite-tsconfig-paths"

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
})

尽情使用！

借助代码片段与 Chakra UI 的原始组件，你可以更快地构建你的 UI。

import { Button, HStack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <HStack>
      <Button>点击我</Button>
      <Button>点击我</Button>
    </HStack>
  )
}

Next.js（App Router）

从 v2 迁移