fix(ui/docs): 完善快速开始，按需引入文档

affects: @varlet/ui

packages/varlet-ui/docs/importOnDemand.en-US.md

@@ -1,40 +1,82 @@
-# 快速开始
+# Import On Demand
 
-## 介绍
+### 介绍
+The on-demand import avoids the full import of components and can effectively reduce the size of the distribution package.
+It is recommended to use `Plugin Based Introduction` or `ES module based manual introduction`
 
-这里为您介绍常见开发模式下接入组件库的最基本方式。
+### Plugin based introduction
 
-## 安装
-
-### CDN
-`varlet.js`包含组件库的所有样式和逻辑, 引入即可。
+### Webpack
+```shell
+# Install plugin
+# npm
+npm i babel-plugin-import -D 
+# yarn
+yarn add babel-plugin-import -D
+```
 
-```html
-<div id="app"></div>
-<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
-<script src="https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js"></script>
-<script>
-  const app = Vue.createApp({
-    template: '<var-button>按钮</var-button>'
-  })
-  app.use(Varlet).mount('#app')
-</script>
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    [
+      'import',
+      {
+        libraryName: '@varlet/ui',
+        libraryDirectory: 'es',
+        style: true,
+      },
+      '@varlet/ui',
+    ],
+  ],
+};
 ```
 
-### Webpack/Vite
+### Vite
+
 ```shell
-# 通过npm或yarn安装
+# Install plugin
 # npm
-npm i @varlet/ui -S
+npm i vite-plugin-style-import -D 
 # yarn
-yarn add @varlet/ui
+yarn add vite-plugin-style-import -D
 ```
 
 ```js
-import Vue from 'vue'
-import App from './App.vue'
-import Varlet from '@varlet/ui'
-import '@varlet/ui/es/style'
+// vite.config.js
+import vue from '@vitejs/plugin-vue'
+import styleImport from 'vite-plugin-style-import'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    styleImport({
+      libs: [
+        {
+          libraryName: '@varlet/ui',
+          esModule: true,
+          resolveStyle: name => `@varlet/ui/es/${name}/style/index`,
+        },
+      ]
+    })
+  ]
+})
+```
+
+After the configuration is complete, and the component is imported as follows, 
+the plugin will automatically import the corresponding style file for the component
+
+```html
+import { Button } from '@varlet/ui'
+```
 
-createApp(App).use(Varlet).mount('#app')
-```
+### ES module based manual introduction
+
+The ES module is very tree-shaking friendly,
+and you can manually import the required component logic and style files directly to implement on-demand introduction.
+
+```html
+import { Button } from '@varlet/ui'
+import '@varlet/ui/es/button/style'
+```

packages/varlet-ui/docs/importOnDemand.zh-CN.md

@@ -1,10 +1,10 @@
 # 按需引入
 
-## 介绍
+### 介绍
 按需引入避免了组件的全量导入，可以有效的减少发布包的大小。
 这里推荐`基于插件的引入方式`或`基于es模块的手动引入方式`
 
-## 基于插件的引入方式
+### 基于插件的引入方式
 
 ### Webpack
 ```shell
@@ -70,7 +70,7 @@ export default defineConfig({
 import { Button } from '@varlet/ui'
 ```
 
-## 基于es模块的手动引入方式
+### 基于es模块的手动引入方式
 
 es模块对于tree-shaking十分友好，您也可以直接手动引入需要的组件逻辑和样式文件来实现按需引入。
 

packages/varlet-ui/docs/quickstart.en-US.md

@@ -1,10 +1,10 @@
 # Quickstart
 
-## Intro
+### Intro
 
 Here are the most basic ways to access component libraries in common development patterns.
 
-## Install
+### Install
 
 ### CDN
 `varlet.js` contain all the styles and logic of the component library, and you can import them.

packages/varlet-ui/docs/quickstart.zh-CN.md

@@ -1,10 +1,10 @@
 # 快速开始
 
-## 介绍
+### 介绍
 
 这里为您介绍常见开发模式下接入组件库的最基本方式。
 
-## 安装
+### 安装
 
 ### CDN
 `varlet.js`包含组件库的所有样式和逻辑, 引入即可。