Skip to content

fix(docs): 快速上手文件 #3058

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Miles-hxy merged 2 commits into from
Mar 6, 2025
Merged

fix(docs): 快速上手文件 #3058

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a0bbfd5
fix(docs): 快速上手文件
oasis-cloud Mar 6, 2025
e0837c6
fix(docs): 快速上手文件
oasis-cloud Mar 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 15 additions & 45 deletions src/sites/sites-react/doc/docs/react/start-react.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,54 +17,22 @@ yarn add @nutui/nutui-react
npm install @nutui/nutui-react
```

#### 2. Install and use via CDN
#### 2. Manual On-Demand Loading

> NutUI is available on public CDNs like **jsdelivr** and **unpkg**.
> It is not recommended to use the component library CDN in the production environment. If this method is required, it is recommended to download the specific version of the CDN file to the local project directory for use.
You can manually import individual components.

:::demo
```js
import '@nutui/nutui-react/dist/es/packages/button/style'
import Button from '@nutui/nutui-react/dist/es/packages/button'
```

Note that when manually loading components on demand, you also need to import the global class file in the entry file to load some of NutUI React's global logic and styles:

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- import style -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@nutui/nutui-react/dist/style.css"
/>
<!-- import React -->
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.production.min.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
></script>
<!-- Import NutUI component library -->
<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui-react/dist/nutui.react.umd.js"></script>
</head>
<body>
<div id="app"></div>
<script>
// Render a button component under the #app tag
ReactDOM.render(
React.createElement(
nutui.react.Button,
null,
React.createElement('div', null, 'Primary button')
),
document.querySelector('#app')
)
</script>
</body>
</html>
```js
import '@nutui/nutui-react/dist/styles/themes/default.scss'
```

:::
If you find the above method cumbersome, you can use the automatic on-demand loading provided by Method 3. However, when using automatic on-demand loading, you still need to import the global class file.

## Component usage

Expand Down Expand Up @@ -123,7 +91,7 @@ export default defineConfig({
{
libName: '@nutui/nutui-react',
style: (name) => {
return `@nutui/nutui-react/dist/esm/${name}/style/css`
return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style/css`
},
replaceOldImport: false,
camel2DashComponentName: false,
Expand Down Expand Up @@ -164,9 +132,11 @@ Babel configuration:
'import',
{
libraryName: '@nutui/nutui-react',
libraryDirectory: 'dist/esm',
style: 'css',
camel2DashComponentName: false,
customName: (name, file) => {
return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}`
},
},
'nutui-react',
],
Expand Down
78 changes: 24 additions & 54 deletions src/sites/sites-react/doc/docs/react/start-react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

## 安装

#### 1. 通过 NPM 安装
#### 1. 安装

```sh
# pnpm
Expand All @@ -17,55 +17,6 @@ yarn add @nutui/nutui-react
npm install @nutui/nutui-react
```

#### 2. 通过 CDN 安装及使用

> 可以在 **jsdelivr** 和 **unpkg** 等公共 CDN 上获取到 NutUI。
> 不推荐在生产环境使用组件库 CDN，如果需要这种使用方式，建议将特定版本的 CDN 文件下载至本地项目目录中使用。

:::demo

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 引入样式 -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@nutui/nutui-react/dist/style.css"
/>
<!-- 引入React -->
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.production.min.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
></script>
<!-- 引入NutUI组件库 -->
<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui-react/dist/nutui.react.umd.js"></script>
</head>
<body>
<div id="app"></div>
<script>
// 在 #app 标签下渲染一个按钮组件
ReactDOM.render(
React.createElement(
nutui.react.Button,
null,
React.createElement('div', null, '主要按钮')
),
document.querySelector('#app')
)
</script>
</body>
</html>
```

:::

## 组件使用

> NutUI React 默认支持 Tree Shaking，在无任何插件配置的情况下支持组件 JS 文件的按需引入。但 css 样式文件无法通过这种方式实现，因此从样式的角度可以分为以下两种使用方法：
Expand All @@ -90,7 +41,24 @@ ReactDOM.render(

:::

#### 方法二、按需引入样式
#### 方法二、手动按需加载

可以手动引入部分组件。

```js
import '@nutui/nutui-react/dist/es/packages/button/style'
import Button from '@nutui/nutui-react/dist/es/packages/button'
```

需要注意的是，`在手动按需加载时，你还需要在入口文件中引入 global 类的文件来加载一些 NutUI React 的全局性逻辑和样式：`

```js
import '@nutui/nutui-react/dist/styles/themes/default.scss'
```

如果你认为上面的写法比较繁琐，你可以使用方法三提供的自动按需加载，`但是使用自动按需加载时扔需引入 global 类的文件`。

#### 方法三、自动的按需加载

<details>
<summary>vite</summary>
Expand Down Expand Up @@ -123,7 +91,7 @@ export default defineConfig({
{
libName: '@nutui/nutui-react',
style: (name) => {
return `@nutui/nutui-react/dist/esm/${name}/style/css`
return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style/css`
},
replaceOldImport: false,
camel2DashComponentName: false,
Expand Down Expand Up @@ -164,9 +132,11 @@ babel 配置：
'import',
{
libraryName: '@nutui/nutui-react',
libraryDirectory: 'dist/esm',
style: 'css',
camel2DashComponentName: false,
customName: (name, file) => {
return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}`
},
},
'nutui-react',
],
Expand All @@ -176,7 +146,7 @@ babel 配置：

:::

</details><br/>
</details><br />

## 使用注意事项

Expand Down
2 changes: 1 addition & 1 deletion src/sites/sites-react/doc/docs/taro/intro-react.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ NutUI-React component library, based on Taro, uses React technology stack to dev

## Features

- 🚀 70+ high-quality components covering mainstream mobile scenarios
- 🚀 80+ high-quality components covering mainstream mobile scenarios
- 💪 Supports a set of code to develop multi-terminal Mini Programs +H5 at the same time
- 📖 Based on JD APP 10.0 visual specification
- 🍭 Support on-demand reference
Expand Down
Loading