fix(ui/types): 修改函数式组件类型声明

affects: @varlet/cli, @varlet/ui

packages/varlet-cli/site/site.config.json

@@ -39,6 +39,14 @@
         "doc": "quickstart",
         "nonComponent": true
       },
+      {
+        "text": {
+          "zh-CN": "按需引入",
+          "en-US": "Import on demand"
+        },
+        "doc": "importOnDemand",
+        "nonComponent": true
+      },
       {
         "text": {
           "zh-CN": "组件",

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

@@ -0,0 +1,40 @@
+# 快速开始
+
+## 介绍
+
+这里为您介绍常见开发模式下接入组件库的最基本方式。
+
+## 安装
+
+### CDN
+`varlet.js`包含组件库的所有样式和逻辑, 引入即可。
+
+```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>
+```
+
+### Webpack/Vite
+```shell
+# 通过npm或yarn安装
+# npm
+npm i @varlet/ui -S
+# yarn
+yarn add @varlet/ui
+```
+
+```js
+import Vue from 'vue'
+import App from './App.vue'
+import Varlet from '@varlet/ui'
+import '@varlet/ui/es/style'
+
+createApp(App).use(Varlet).mount('#app')
+```

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

@@ -0,0 +1,80 @@
+# 按需引入
+
+## 介绍
+按需引入避免了组件的全量导入，可以有效的减少发布包的大小。
+这里推荐`基于插件的引入方式`或`基于es模块的手动引入方式`
+
+## 基于插件的引入方式
+
+### Webpack
+```shell
+# 安装插件
+# npm
+npm i babel-plugin-import -D 
+# yarn
+yarn add babel-plugin-import -D
+```
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    [
+      'import',
+      {
+        libraryName: '@varlet/ui',
+        libraryDirectory: 'es',
+        style: true,
+      },
+      '@varlet/ui',
+    ],
+  ],
+};
+```
+
+### Vite
+
+```shell
+# 安装插件
+# npm
+npm i vite-plugin-style-import -D 
+# yarn
+yarn add vite-plugin-style-import -D
+```
+
+```js
+// 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`,
+        },
+      ]
+    })
+  ]
+})
+```
+
+完成配置之后，如下引入组件，插件会自动引入组件对应的样式文件。
+
+```html
+import { Button } from '@varlet/ui'
+```
+
+## 基于es模块的手动引入方式
+
+es模块对于tree-shaking十分友好，您也可以直接手动引入需要的组件逻辑和样式文件来实现按需引入。
+
+```html
+import { Button } from '@varlet/ui'
+import '@varlet/ui/es/button/style'
+```

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

@@ -1 +1,40 @@
-# Quickstart
+# Quickstart
+
+## Intro
+
+Here are the most basic ways to access component libraries in common development patterns.
+
+## Install
+
+### CDN
+`varlet.js` contain all the styles and logic of the component library, and you can import them.
+
+```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>
+```
+
+### Webpack/Vite
+```shell
+# Install with npm or yarn
+# npm
+npm i @varlet/ui -S
+# yarn
+yarn add @varlet/ui
+```
+
+```js
+import Vue from 'vue'
+import App from './App.vue'
+import Varlet from '@varlet/ui'
+import '@varlet/ui/es/style'
+
+createApp(App).use(Varlet).mount('#app')
+```

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

@@ -7,7 +7,7 @@
 ## 安装
 
 ### CDN
-varlet.js包含组件库的所有样式和逻辑, 引入即可。
+`varlet.js`包含组件库的所有样式和逻辑, 引入即可。
 
 ```html
 <div id="app"></div>

packages/varlet-ui/types/dialog.d.ts

@@ -38,3 +38,5 @@ export interface Dialog {
   close(): void
   Component: DialogComponent
 }
+
+export const Dialog: Dialog

packages/varlet-ui/types/picker.d.ts

@@ -36,3 +36,5 @@ export interface Picker {
   close(): void
   Component: PickerComponent
 }
+
+export const Picker: Picker

packages/varlet-ui/varlet.config.js

@@ -36,6 +36,14 @@ module.exports = {
         doc: 'quickstart',
         nonComponent: true,
       },
+      {
+        text: {
+          'zh-CN': '按需引入',
+          'en-US': 'Import on demand',
+        },
+        doc: 'importOnDemand',
+        nonComponent: true,
+      },
       {
         text: {
           'zh-CN': '组件',