https://github.com/c10342/react-ui

慕课网学习课程—react+typescript组件库
https://github.com/c10342/react-ui

Last synced: 4 days ago
JSON representation

慕课网学习课程—react+typescript组件库

• Host: GitHub
• URL: https://github.com/c10342/react-ui
• Owner: c10342
• Created: 2020-04-23T14:57:00.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-02-10T22:08:02.000Z (almost 3 years ago)
• Last Synced: 2024-10-14T14:06:53.033Z (about 1 month ago)
• Language: TypeScript
• Homepage:
• Size: 1.7 MB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

## lin-react-ui

这是一套基于react+typescript的ui组件库

### 安装

使用 npm 或 yarn 安装

```shell script

npm install lin-react-ui --save

yarn add lin-react-ui

```

### 使用

- 全量引入

引用样式

```javascript

import 'lin-react-ui/dist/index.css';

```

使用组件

```javascript

import { Button } from 'lin-react-ui';

ReactDOM.render(, mountNode);

```

- 按需加载

下面两种方式都可以只加载用到的组件。

使用 babel-plugin-import（推荐）

```shell script

npm install babel-plugin-import -D

```

```javascript

// .babelrc.js

  plugins: [

    [

      "import",

      {

        libraryName: "lin-react-ui",

        camel2DashComponentName: false, // 是否需要驼峰转短线

        camel2UnderlineComponentName: false, // 是否需要驼峰转下划线

        libraryDirectory: "dist/components",

        style: "css",

      },

    ],

  ],

```

然后只需从 lin-react-ui 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。

```javascript

// babel-plugin-import 会帮助你加载 JS 和 CSS

import { Button } from 'lin-react-ui';

```

手动引入

```javascript

import Button from 'lin-react-ui/components/Button'; // 加载 JS

import 'lin-react-ui/components/Button/style/css'; // 加载 CSS

```