React + Vant 入门指南：轻松构建移动端应用

---

React + Vant 入门指南：轻松构建移动端应用

在移动端开发中，UI 组件库能极大提升开发效率。Vant 是有赞团队出品的一款轻量、优雅的移动端组件库，原生支持 Vue。但对于 React 开发者来说，Vant React（@vant/react） 项目也正在稳步发展中，适合用在移动 Web 项目中。

本篇文章将带你快速了解如何在 React 项目中使用 Vant。

---

一、为什么选择 Vant？

• 丰富的移动端组件，如 Button、Popup、Tab、Toast 等
• 良好的视觉设计，适配主流移动设备
• 按需加载、主题定制，适合定制化场景
• 社区活跃，文档完善

---

二、快速开始

1. 创建 React 项目

使用 Vite 更适合移动端轻量开发：

npm create vite@latest my-vant-app -- --template react
cd my-vant-app
npm install

2. 安装 Vant React

npm install vant-react

如果你希望使用按需引入，还可以搭配 babel-plugin-import 或手动引入样式。

---

三、引入组件并使用

示例：Button 按钮

在 App.jsx 中使用 Vant 的按钮组件：

import React from 'react'
import { Button } from 'vant-react'
import 'vant-react/es/button/style'  // 样式引入

function App() {
  return (
    <div style={{ padding: 20 }}>
      <h2>Vant Button 示例</h2>
      <Button type="primary">主要按钮</Button>
      <Button type="success">成功按钮</Button>
    </div>
  )
}

export default App

---

四、更多组件示例

1. Toast 轻提示

import { Toast } from 'vant-react'

Toast.show('操作成功') // 调用提示

2. Tab 标签页

import { Tabs, TabPane } from 'vant-react'
import 'vant-react/es/tabs/style'

function TabDemo() {
  return (
    <Tabs defaultActiveKey="1">
      <TabPane tab="首页" key="1">首页内容</TabPane>
      <TabPane tab="发现" key="2">发现内容</TabPane>
    </Tabs>
  )
}

---

五、按需加载（可选）

为了减小打包体积，可以使用 babel-plugin-import 实现按需加载：

安装插件

npm install babel-plugin-import -D

配置 .babelrc

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "vant-react",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]
}

这样你就可以写成：

import { Button } from 'vant-react'
// 自动引入样式，无需手动写 `import 'vant-react/es/button/style'`

---

六、适配与优化建议

• viewport 适配 ：使用 postcss-pxtorem 或 vw 单位让布局更灵活
• 主题定制：通过 Less 或 CSS 变量自定义组件主题
• 性能优化：结合 React.memo、懒加载、骨架屏等技巧提升用户体验

---

七、结语

虽然 Vant React 相比 Vue 版本成熟度稍低，但核心组件已经比较完善，适合构建中小型的移动端 Web 应用。如果你喜欢 React 的语法习惯，又希望拥有一套好用的移动组件库，不妨尝试下它。

👉 GitHub：vant-react

---