📝: 添加自动按需引入使用说明
This commit is contained in:
sight
parent
527d10829c
commit
341d1cd82d
47
package/document/components.d.ts
vendored
47
package/document/components.d.ts
vendored
@ -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']
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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">组合API</lay-button>
|
||||
<lay-button @click="openLayer">Hello</lay-button>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user