快速上手 - @bud-fe/react-taro-ui

目前组件库只在钉钉小程序验证过，微信小程序、H5 上可能存在样式兼容性问题

带有 dingtalk only 的组件代表在 H5 上有已知的兼容性问题

1. 安装

先确保 Taro 项目已安装 taro-ui@^3.0.0-alpha.10

然后执行

$ pnpm add @bud-fe/react-taro-ui
# or
$ npm i --save @bud-fe/react-taro-ui
# or
$ yarn add @bud-fe/react-taro-ui

2. 使用

引入组件

方式一：通过 babel 插件按需引入组件

确认项目中已安装 babel-plugin-import
在 babel.config.js 中添加配置：

plugins: [
  [
    'import',
    {
      libraryName: '@bud-fe/react-taro-ui',
      libraryDirectory: 'es/components',
      style: (name) => `${name}/index.css`,
    },
    '@bud-fe/react-taro-ui',
  ],
];

接着就可以在代码中直接引入组件，插件会自动将代码转化为按需引入的形式

// 原始代码
import { BfCheckbox } from '@bud-fe/react-taro-ui';
// 编译后代码
import BfCheckbox from '@bud-fe/react-taro-ui/es/components/bf-checkbox';
import '@bud-fe/react-taro-ui/es/components/bf-checkbox/index.css';

方式二：手动按需引入组件

在不使用插件的情况下，可以手动引入需要使用的组件和样式。

// 引入组件
import BfCheckbox from '@bud-fe/react-taro-ui/es/components/bf-checkbox';
// 引入组件对应的样式，若组件没有样式文件，则无须引入
import '@bud-fe/react-taro-ui/es/components/bf-checkbox/index.css';