还在为移动端项目组件发愁？快来试试React Vant吧！

前言

对于前端小白来说，没有组件库，写组件无非是一些无聊的操作，这加加，那加加，加加加加到厌倦....

虽然说中小厂有三方组件库，大厂有自己的组件库，那对于前端个人开发者没有组件库怎么办？快来试试React Vant ！！！~~一步成为CV战神！~~

React Vant是什么？

Vant是有赞前端团队的开源移动组件库，于2017年开源，拥有性能极佳的高质量组件库，覆盖了移动端主流场景。

特性如下：

性能极佳，组件平均体积小于1KB（min + gzip）

70+ 个高质量组件，覆盖移动端主流场景

使用TypeScript编写，提供完整的类型定义

提供完善的文档和组件实例

支持按需引入和Tree Shaking

支持Vite 和 Parcel@2

支持SSR（nextjs，remix）

浏览器支持

支持现代浏览器以及Chrome >= 51、IOS >= 10.0

怎么快速上手？

在当前项目终端中可以通过npm或yarn安装

bash 复制代码

# 通过npm安装
npm i react-vant

# 通过yarn安装
yarn add react-vant

引入

对于想要的组件，直接引入即可，react-vant会自动加载css样式文件：

jsx 复制代码

import {Button} from 'react-vant'

具体实践

要实现上面页面，并且下面的Tabbar也能够点击选择。

App.jsx

jsx 复制代码

import "./App.css";
import { lazy, Suspense } from "react";
import { Routes, Route, Navigate } from "react-router-dom";
import MainLayout from "@/components/MainLayout";
import BlankLayout from "@/components/BlankLayout";
import { Search } from "react-vant";

const Home = lazy(() => import("@/pages/Home"));
const SearchPage = lazy(() => import("@/pages/SearchPage"));
const Discount = lazy(() => import("@/pages/Discount"));
const Collection = lazy(() => import("@/pages/Collection"));
const Trip = lazy(() => import("@/pages/Trip"));
const Account = lazy(() => import("@/pages/Account"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        {/* 带有tabbar的Layout */}
        <Route element={<MainLayout />}>
          <Route path="/" element={<Navigate to="/home" />}></Route>
          <Route path="/home" element={<Home />}></Route>
          <Route path="/discount" element={<Discount />}></Route>
          <Route path="/Collection" element={<Collection />}></Route>
          <Route path="/trip" element={<Trip />}></Route>
          <Route path="/account" element={<Account />}></Route>
        </Route>

        {/* 空的Layout */}
        <Route element={<BlankLayout />}>
          <Route path="/search" element={<SearchPage />}></Route>
        </Route>
      </Routes>
    </Suspense>
  );
}

export default App;

用路由懒加载和两个布局组件。阅读文档直接CV起手。

主页面布局

jsx 复制代码

import { useState, useEffect } from "react";
import { Tabbar } from "react-vant";
import { HomeO, Search, FriendsO, SettingO, UserO } from "@react-vant/icons";
import { Outlet, useNavigate, useLocation } from "react-router-dom";

// 菜单栏配置
const tabs = [
  { icon: <HomeO />, title: "首页", path: "/home" },
  { icon: <Search />, title: "特惠专区", path: "/discount" },
  { icon: <FriendsO />, title: "我的收藏", path: "/Collection" },
  { icon: <SettingO />, title: "行程", path: "/trip" },
  { icon: <UserO />, title: "我的账户", path: "/account" },
];

const MainLayout = () => {
  const [active, setActive] = useState(0);
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    console.log(location.pathname, "////");

    // es6的使用power
    const index = tabs.findIndex((tab) =>
      location.pathname.startsWith(tab.path)
    );
    setActive(index);
  }, []);
  return (
    <div>
      <Outlet />
      {/* tabbar */}
      <Tabbar
        value={active}
        onChange={(key) => {
          setActive(key);
          navigate(tabs[key].path);
        }}
      >
        {tabs.map((tab, index) => (
          <Tabbar.Item key={index} icon={tab.icon}>
            {tab.title}
          </Tabbar.Item>
        ))}
      </Tabbar>
    </div>
  );
};

export default MainLayout;

BlankLayout

jsx 复制代码

import { Outlet } from "react-router-dom";
const BlankLayout = () => {
  return (
    <div>
      <Outlet />
    </div>
  );
};

export default BlankLayout;

参考资料

React Vant Github仓库

React Vant Tabbar