Merge pull request #181 from duenyang/develop

chore(docs): 优化使用文档
TDesignOteam · Jan 2, 2025 · e41344e · e41344e
2 parents 20e6da6 + a07f766
commit e41344e
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 67 deletions.
diff --git a/README-zh_CN.md b/README-zh_CN.md
@@ -53,9 +53,7 @@ pnpm add tdesign-web-components
 import 'tdesign-web-components/lib/style/index.css'
 import 'tdesign-web-components/lib/button'
 
-import 'tdesign-web-components/lib/jsx';
-
-render(jsx`<t-button>Hello TDesign</t-button>`, document.body);
+document.body.innerHTML = `<t-button theme="success">按钮</t-button>`;
 ```
 
 更多使用方式请点击 👉🏻 [快速开始](./site/docs/getting-started.md)

diff --git a/README.md b/README.md
@@ -51,9 +51,7 @@ pnpm add tdesign-web-components
 import 'tdesign-web-components/lib/style/index.css'
 import 'tdesign-web-components/lib/button'
 
-import 'tdesign-web-components/lib/jsx';
-
-render(jsx`<t-button>Hello TDesign</t-button>`, document.body);
+document.body.innerHTML = `<t-button theme="success">按钮</t-button>`;
 ```
 
 More ways to use please click 👉🏻 [getting-started](./site/docs/getting-started.md)

diff --git a/site/docs/getting-started.md b/site/docs/getting-started.md
@@ -32,6 +32,13 @@ import 'tdesign-web-components/lib/button';
 import 'tdesign-web-components/lib/style/index.css'; // 少量公共样式
 import 'tdesign-web-components';
 ```
+然后按照以下写法使用即可
+
+```js
+document.body.innerHTML = `<t-button theme="success">按钮</t-button>`;
+```
+
+### 工程化使用
 
 如果使用vite打包工具，需要在`vite.config.ts`中添加以下配置，设置vite解析`jsx`的逻辑：
 
@@ -76,67 +83,6 @@ export default defineConfig({
 }
 ```
 
-### 在React中使用
-
-```js
-
-import renderReact from 'tdesign-web-components/lib/react';
-
-const App = () => {
-  const wrapper = React.useRef();
-  const button = React.useRef();
-
-  React.useEffect(() => {
-    button.current = renderReact(
-      <t-button
-        onClick={() => {
-          button.current.props.theme = 'success';
-          button.current.update();
-        }}
-      >
-        按钮
-      </t-button>,
-      ref.current
-    );
-  }, [])
-
-  return (
-    <div ref={wrapper}>
-    </div>
-  )
-}
-```
-
-### 在Vue中使用
-
-```js
-import renderVue from 'tdesign-web-components/lib/vue';
-
-export default {
-  name: 'App',
-  setup() {
-    const wrapper = ref()
-    const button = ref()
-
-    onMounted(() => {
-      button.value = renderVue(
-        <t-button
-          onClick={() => {
-            button.value.props.theme = 'success'
-            button.value.update()
-          }}
-        >
-          按钮
-        </t-button>,
-        wrapper.value,
-      )
-    })
-
-    return () => <div ref={wrapper}></div>
-  },
-}
-```
-
 ### 更改主题
 
 由于原始样式基于 less 编写，需要自行处理 less 文件的编译（例如安装 less、less-loader）

diff --git a/site/docs/react.md b/site/docs/react.md
@@ -0,0 +1,42 @@
+---
+title: React 中使用
+spline: explain
+isGettingStarted: true
+---
+
+### 安装
+
+```bash
+npm i tdesign-web-components
+```
+
+### 使用
+
+```javascript
+import 'tdesign-web-components/lib/style/index.css'; // 少量公共样式
+import 'tdesign-web-components/lib/button';
+
+const App = () => {
+  const button = React.useRef();
+  const [theme, setTheme] = React.useState('success')
+
+  const clickFn = () => {
+    setTheme(theme === 'success' ? 'warning' : 'success');
+  }
+
+  React.useEffect(() => {
+    button.current.addEventListener('click', clickFn)
+    return () => {
+      button.current.removeEventListener('click', clickFn)
+    }
+  }, [theme])
+
+  return (
+    <t-button ref={button} theme={theme}></t-button>
+  )
+}
+```
+### 注意
+
+props的key需要由`camelCase`写法，换为`hyphenate`，例如`abcDef`在使用时要设置为`abc-def`
+
diff --git a/site/docs/vue.md b/site/docs/vue.md
@@ -0,0 +1,37 @@
+---
+title: Vue 中使用
+spline: explain
+isGettingStarted: true
+---
+
+### 安装
+
+#### 使用 npm 安装
+
+```bash
+npm i tdesign-web-components
+```
+
+### 使用
+
+```js
+import 'tdesign-web-components/lib/style/index.css'; // 少量公共样式
+import 'tdesign-web-components/lib/button';
+
+export default {
+  name: 'App',
+  setup() {
+    const theme = ref('success')
+
+    const clickFn = () => {
+      theme.value === 'success' ? 'warning' : 'success'
+    }
+
+    return () => <t-button :theme={theme} @click="clickFn"></t-button>
+  },
+}
+```
+
+### 注意
+
+props的key需要由`camelCase`写法，换为`hyphenate`，例如`abcDef`在使用时要设置为`abc-def`
diff --git a/site/sidebar.config.ts b/site/sidebar.config.ts
@@ -41,6 +41,25 @@ export default [
       },
     ],
   },
+  {
+    title: '框架使用',
+    name: 'frame',
+    type: 'doc',
+    children: [
+      {
+        title: 'React',
+        name: 'react',
+        path: '/webcomponents/react',
+        component: () => import('@docs/react.md'),
+      },
+      {
+        title: 'Vue',
+        name: 'vue',
+        path: '/webcomponents/vue',
+        component: () => import('@docs/vue.md'),
+      },
+    ],
+  },
   {
     title: '基础',
     name: 'base',