Skip to content

Commit cbc73a2

Browse files
author
zhiwen.zhao
committed
docs: update quick start
1 parent 914d432 commit cbc73a2

File tree

1 file changed

+53
-1
lines changed

1 file changed

+53
-1
lines changed

docs/getting-started.md

Lines changed: 53 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,56 @@ nav:
66

77
# 快速上手
88

9-
Balabala...
9+
## 安装
10+
11+
**使用 npm 或 yarn 安装**
12+
13+
```shell
14+
$ npm install @zzzzw/happy-ui --save
15+
```
16+
17+
```shell
18+
yarn add @zzzzw/happy-ui
19+
```
20+
21+
## 示例
22+
23+
```js
24+
import Alert from '@zzzzw/happy-ui/es/alert'; // 手动按需加载 js
25+
import '@zzzzw/happy-ui/es/alert/style'; // 手动按需加载 less
26+
27+
ReactDOM.render(<Alert kind="warning">这是一条警告提示</Alert>, mountNode);
28+
```
29+
30+
### 自动按需加载
31+
32+
使用 [babel-plugin-import ](https://www.npmjs.com/package/babel-plugin-import) 优化引入方式,如下:
33+
34+
```js
35+
import { Alert } from '@zzzzw/happy-ui'; // 与上述示例等价
36+
37+
ReactDOM.render(<Alert kind="warning">这是一条警告提示</Alert>, mountNode);
38+
```
39+
40+
安装 `babel-plugin-import`
41+
42+
```
43+
yarn add babel-plugin-import --dev
44+
```
45+
46+
配置`.babelrc``babel-loader`
47+
48+
```json
49+
{
50+
"plugins": [
51+
[
52+
"import",
53+
{
54+
"libraryName": "@zzzzw/happy-ui",
55+
"libraryDirectory": "esm", // default: lib
56+
"style": true // or 'css'
57+
}
58+
]
59+
]
60+
}
61+
```

0 commit comments

Comments
 (0)