📝: 添加自动按需引入使用说明

package/document/components.d.ts

@@ -34,40 +34,83 @@ declare module '@vue/runtime-core' {
     Input: typeof import('./src/document/zh-CN/components/input.md')['default']
     InputNumber: typeof import('./src/document/zh-CN/components/inputNumber.md')['default']
     LayAvatar: typeof import('@layui/layui-vue')['LayAvatar']
+    LayAvatarList: typeof import('@layui/layui-vue')['LayAvatarList']
     LayBacktop: typeof import('@layui/layui-vue')['LayBacktop']
     LayBadge: typeof import('@layui/layui-vue')['LayBadge']
     LayBody: typeof import('@layui/layui-vue')['LayBody']
+    LayBreadcrumb: typeof import('@layui/layui-vue')['LayBreadcrumb']
+    LayBreadcrumbItem: typeof import('@layui/layui-vue')['LayBreadcrumbItem']
     LayButton: typeof import('@layui/layui-vue')['LayButton']
     LayButtonContainer: typeof import('@layui/layui-vue')['LayButtonContainer']
     LayButtonGroup: typeof import('@layui/layui-vue')['LayButtonGroup']
     LayCard: typeof import('@layui/layui-vue')['LayCard']
+    LayCarousel: typeof import('@layui/layui-vue')['LayCarousel']
+    LayCarouselItem: typeof import('@layui/layui-vue')['LayCarouselItem']
+    LayCheckbox: typeof import('@layui/layui-vue')['LayCheckbox']
+    LayCheckboxGroup: typeof import('@layui/layui-vue')['LayCheckboxGroup']
     LayCol: typeof import('@layui/layui-vue')['LayCol']
+    LayCollapse: typeof import('@layui/layui-vue')['LayCollapse']
+    LayCollapseItem: typeof import('@layui/layui-vue')['LayCollapseItem']
     LayColorPicker: typeof import('@layui/layui-vue')['LayColorPicker']
     LayConfigProvider: typeof import('@layui/layui-vue')['LayConfigProvider']
-    LayDatePicker: typeof import('@layui/layui-vue')['LayDatePicker']
+    LayContainer: typeof import('@layui/layui-vue')['LayContainer']
+    LayCountUp: typeof import('@layui/layui-vue')['LayCountUp']
     LayDropdown: typeof import('@layui/layui-vue')['LayDropdown']
     LayDropdownMenu: typeof import('@layui/layui-vue')['LayDropdownMenu']
     LayDropdownMenuItem: typeof import('@layui/layui-vue')['LayDropdownMenuItem']
+    LayEmpty: typeof import('@layui/layui-vue')['LayEmpty']
     Layer: typeof import('./src/document/zh-CN/components/layer.md')['default']
+    LayException: typeof import('@layui/layui-vue')['LayException']
     LayField: typeof import('@layui/layui-vue')['LayField']
+    LayFooter: typeof import('@layui/layui-vue')['LayFooter']
     LayForm: typeof import('@layui/layui-vue')['LayForm']
+    LayFormItem: typeof import('@layui/layui-vue')['LayFormItem']
+    LayFullscreen: typeof import('@layui/layui-vue')['LayFullscreen']
     LayHeader: typeof import('@layui/layui-vue')['LayHeader']
     LayIcon: typeof import('@layui/icons-vue')['LayIcon']
     LayIconPicker: typeof import('@layui/layui-vue')['LayIconPicker']
     LayInput: typeof import('@layui/layui-vue')['LayInput']
+    LayInputNumber: typeof import('@layui/layui-vue')['LayInputNumber']
+    LayLayer: typeof import('@layui/layer-vue')['LayLayer']
     LayLayout: typeof import('@layui/layui-vue')['LayLayout']
+    LayLine: typeof import('@layui/layui-vue')['LayLine']
     LayLogo: typeof import('@layui/layui-vue')['LayLogo']
+    LayMenu: typeof import('@layui/layui-vue')['LayMenu']
+    LayMenuItem: typeof import('@layui/layui-vue')['LayMenuItem']
+    LayNoticeBar: typeof import('@layui/layui-vue')['LayNoticeBar']
     Layout: typeof import('./src/document/zh-CN/components/layout.md')['default']
+    LayPage: typeof import('@layui/layui-vue')['LayPage']
     LayPanel: typeof import('@layui/layui-vue')['LayPanel']
+    LayProgress: typeof import('@layui/layui-vue')['LayProgress']
     LayQuote: typeof import('@layui/layui-vue')['LayQuote']
+    LayRadio: typeof import('@layui/layui-vue')['LayRadio']
+    LayRate: typeof import('@layui/layui-vue')['LayRate']
+    LayResult: typeof import('@layui/layui-vue')['LayResult']
+    LayRipple: typeof import('@layui/layui-vue')['LayRipple']
     LayRow: typeof import('@layui/layui-vue')['LayRow']
     LayScroll: typeof import('@layui/layui-vue')['LayScroll']
-    LaySearch: typeof import('@layui/layui-vue')['LaySearch']
+    LaySelect: typeof import('@layui/layui-vue')['LaySelect']
+    LaySelectOption: typeof import('@layui/layui-vue')['LaySelectOption']
     LaySide: typeof import('@layui/layui-vue')['LaySide']
+    LaySkeleton: typeof import('@layui/layui-vue')['LaySkeleton']
+    LaySkeletonItem: typeof import('@layui/layui-vue')['LaySkeletonItem']
+    LaySlider: typeof import('@layui/layui-vue')['LaySlider']
+    LaySplitPanel: typeof import('@layui/layui-vue')['LaySplitPanel']
+    LaySplitPanelItem: typeof import('@layui/layui-vue')['LaySplitPanelItem']
+    LayStep: typeof import('@layui/layui-vue')['LayStep']
+    LayStepItem: typeof import('@layui/layui-vue')['LayStepItem']
+    LaySubMenu: typeof import('@layui/layui-vue')['LaySubMenu']
     LaySwitch: typeof import('@layui/layui-vue')['LaySwitch']
+    LayTab: typeof import('@layui/layui-vue')['LayTab']
+    LayTabItem: typeof import('@layui/layui-vue')['LayTabItem']
+    LayTable: typeof import('@layui/layui-vue')['LayTable']
+    LayTextarea: typeof import('@layui/layui-vue')['LayTextarea']
     LayTimeline: typeof import('@layui/layui-vue')['LayTimeline']
     LayTimelineItem: typeof import('@layui/layui-vue')['LayTimelineItem']
     LayTooltip: typeof import('@layui/layui-vue')['LayTooltip']
+    LayTransfer: typeof import('@layui/layui-vue')['LayTransfer']
+    LayTransition: typeof import('@layui/layui-vue')['LayTransition']
+    LayTree: typeof import('@layui/layui-vue')['LayTree']
     LayUpload: typeof import('@layui/layui-vue')['LayUpload']
     Line: typeof import('./src/document/zh-CN/components/line.md')['default']
     Load: typeof import('./src/document/zh-CN/components/load.md')['default']

package/document/package.json

@@ -28,7 +28,7 @@
     "rollup": "^2.70.1",
     "typescript": "^4.6.3",
     "vite": "2.9.8",
-    "vite-plugin-md": "^0.13.4",
+    "vite-plugin-md": "^0.13.1",
     "unplugin-auto-import": "^0.7.1",
     "unplugin-vue-components": "^0.19.3",
     "unplugin-layui-vue-resolver": "0.0.10"

package/document/src/document/zh-CN/guide/getStarted.md

@@ -28,7 +28,7 @@
 ```
 npm install @layui/layui-vue --save
 ```
-::: title 全局注册
+::: title 完整引入
 :::
 
 ```js
@@ -42,7 +42,77 @@ createApp(App).use(Layui).mount('#app')
 ::: describe 以上代码便完成了 layui-vue 的引入。需要注意的是，样式文件需要单独引入。
 :::
 
-::: title 按需引入
+::: title 按需引入（自动）
+:::
+
+::: describe 安装 <a href="https://github.com/antfu/unplugin-vue-components" target="_blank" style="color:#5FB878"><code>unplugin-vue-components</code></a> 和 <a href="https://github.com/antfu/unplugin-auto-import" target="_blank" style="color:#5FB878"><code>unplugin-auto-import</code></a> 插件，插件会自动解析模板中用到的组件，并引入组件和样式。
+:::
+
+```
+npm install -D unplugin-vue-components unplugin-auto-import
+```
+
+::: describe vite 配置
+:::
+
+```js
+// vite.config.ts
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { LayuiVueResolver } from 'unplugin-vue-components/resolvers'
+
+export default {
+  plugins: [
+    // ...其它插件
+    
+    // 自动导入 layer-vue 相关函数,例如 layer 等
+    AutoImport({
+      resolvers: [LayuiVueResolver()],
+    }),
+    // 自动解析 layui-vue 组件
+    Components({
+      resolvers: [LayuiVueResolver()],
+    }),
+  ],
+}
+```
+
+::: describe LayuiVueResolver 选项类型声明
+:::
+
+```ts
+export declare function LayuiVueResolver(
+  options?: LayuiVueResolverOptions = {}
+): ComponentResolver
+
+export interface LayuiVueResolverOptions {
+  /**
+   * 将样式与组件一起导入
+   *
+   * @default 'css'
+   */
+  importStyle?: boolean | 'css'
+
+  /**
+   * 是否解析图标
+   *
+   * @default false
+   */
+  resolveIcons?: boolean
+
+  /**
+   * 排除不需要自动导入的组件
+   * 
+   * eg: exclude: ['LayDocTable', /^LayDoc[A-Z]/,]
+   */
+  exclude?: Array<string | RegExp>;
+}
+```
+
+::: title 按需引入（手动）
+:::
+
+::: describe 需要手动引入组件样式
 :::
 
 ```js
@@ -78,7 +148,7 @@ app.mount('#app')
 ::: title 浏览器导入
 :::
 
-::: describe 根据不同的 CDN 提供商有不同的引入方式， 根据不同的 CDN 提供商有不同的引入方式， 我们在这里以 unpkg 举例。
+::: describe 根据不同的 CDN 提供商有不同的引入方式，我们在这里以 unpkg 举例。
 :::
 
 ```html
@@ -100,8 +170,7 @@ app.mount('#app')
 
 <body>
   <div id="app">
-    <lay-button @click="sayHello">选项API</lay-button>
+    <lay-button @click="openLayer">Hello</lay-button>
-    <lay-button @click="openLayer">组合API</lay-button>
   </div>
 </body>
 <script>