docs(import-on-demand): optimize structure

demo/pages/docs/import-on-demand/enUS/index.md

@@ -6,6 +6,8 @@ By default the component theme is light, locale is enUS, no extra imports is nee
 
 For more info about theming, see [Customizing Theme](customize-theme).
 
+## Import Directly
+
 ```html
 <script>
   import { defineComponent } from 'vue'
@@ -47,3 +49,30 @@ For more info about theming, see [Customizing Theme](customize-theme).
   }
 </style>
 ```
+
+## Install on Demand Globally
+
+```js
+import { createApp } from 'vue'
+import {
+  // create naive ui
+  create,
+  // component
+  NButton
+} from 'naive-ui'
+
+const naive = create({
+  components: [NButton]
+})
+
+const app = createApp()
+app.use(naive)
+```
+
+After the installation. You can use the components you installed in SFC like this.
+
+```html
+<template>
+  <n-button>naive-ui</n-button>
+</template>
+```

demo/pages/docs/import-on-demand/zhCN/index.md

@@ -6,6 +6,8 @@ Naive UI 支持 tree shaking，组件、语言、主题均可 tree-shaking。
 
 了解更多关于主题设定的信息，参见[调整主题](customize-theme)。
 
+## 直接引入
+
 ```html
 <script>
   import { defineComponent } from 'vue'
@@ -47,3 +49,30 @@ Naive UI 支持 tree shaking，组件、语言、主题均可 tree-shaking。
   }
 </style>
 ```
+
+## 按需全局安装组件
+
+```js
+import { createApp } from 'vue'
+import {
+  // create naive ui
+  create,
+  // component
+  NButton
+} from 'naive-ui'
+
+const naive = create({
+  components: [NButton]
+})
+
+const app = createApp()
+app.use(naive)
+```
+
+安装后，你可以这样在 SFC 中使用你安装的组件。
+
+```html
+<template>
+  <n-button>naive-ui</n-button>
+</template>
+```

demo/pages/docs/usage-sfc/enUS/index.md

@@ -44,6 +44,8 @@ If you can use vue setup script, you can use it like this.
 
 No tree-shaking. Bundle will have redundant codes.
 
+If you want to install globally but not want all components, please see [Import on Demand](import-on-demand).
+
 ```js
 import { createApp } from 'vue'
 import naive from 'naive-ui'
@@ -59,30 +61,3 @@ After the installation. You can use all the components in you SFC like this.
   <n-button>naive-ui</n-button>
 </template>
 ```
-
-### Install on Demand Globally
-
-```js
-import { createApp } from 'vue'
-import {
-  // create naive ui
-  create,
-  // component
-  NButton
-} from 'naive-ui'
-
-const naive = create({
-  components: [NButton]
-})
-
-const app = createApp()
-app.use(naive)
-```
-
-After the installation. You can use the components you installed in SFC like this.
-
-```html
-<template>
-  <n-button>naive-ui</n-button>
-</template>
-```

demo/pages/docs/usage-sfc/zhCN/index.md

@@ -44,6 +44,8 @@
 
 失去 tree-shaking 的能力，打包有冗余代码。
 
+如果你想全局安装但是不想安装全部组件，请参考[按需引入](import-on-demand)。
+
 ```js
 import { createApp } from 'vue'
 import naive from 'naive-ui'
@@ -59,30 +61,3 @@ app.use(naive)
   <n-button>naive-ui</n-button>
 </template>
 ```
-
-### 按需全局安装组件
-
-```js
-import { createApp } from 'vue'
-import {
-  // create naive ui
-  create,
-  // component
-  NButton
-} from 'naive-ui'
-
-const naive = create({
-  components: [NButton]
-})
-
-const app = createApp()
-app.use(naive)
-```
-
-安装后，你可以这样在 SFC 中使用你安装的组件。
-
-```html
-<template>
-  <n-button>naive-ui</n-button>
-</template>
-```