tntd/README.md

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

# 组件介绍
tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。


## 如何从 `tntd v1.0` 迁移到 `tntd v2.0`  

### 安装 `tntd` 最新版本

```
npm install tntd
```

### 更改配置

1. 添加 .babelrc 中的 import 插件配置，实现按需引入

```diff title=".babelrc"
+  [
+    "import",
+    {
+      "libraryName": "tntd",
+      libraryDirectory: 'es',
+    },
+    "tntd"
+  ],
```

2. 更改 webpack.config.js 中的主题配置

```diff title="webpack.config.js"
{
  loader: "less-loader",
  options: {
    javascriptEnabled: true,
    ...
    modifyVars: {
-      hack: "true; @import \"~@tntd/antd-cover/tnt.less\";"
+      hack: "true; @import \"~tntd/themes/default/variables.less\";"
    }
  }
}
```

3. 修改导入名称

Layout, Icon, Select 等 tntd 1.0 组件和 antd 组件名称存在冲突，请按下方例子进行重命名：

```diff
- import { Layout, Icon, Select } from 'tntd'
+ import { TntdLayout, TntdIcon, TntdSelect } from 'tntd'
```

4. 更改配置

```jsx
// 使用全新的空状态插画
import { renderEmpty } from 'tntd'
// 使用内置语言包替换 antd
// 英文语言包
const enUS = import 'tntd/es/locale/en_US'
// 中文语言包
const zhCN = import 'tntd/es/locale/zh_CN'

export const App = () => {
  return (
    // 使用空状态插画及语言包
    <ConfigProvider locale={zhCN} renderEmpty={renderEmpty}>
      ...
    </ConfigProvider>
  )
}
```