vue3-lazy如何单独页面使用

1. 安装`vue3-lazy`

首先，需要在项目中安装`vue3-lazy`，可以使用npm或yarn进行安装：

npm install vue3-lazy

或者

yarn add vue3-lazy

2. 导入`vue3-lazy`

在需要使用懒加载的页面，需要导入`vue3-lazy`：

import Lazy from 'vue3-lazy';

3. 注册`vue3-lazy`

在页面组件中注册`vue3-lazy`：

export default {
  components: {
    Lazy,
  },
  // ...
}

4. 使用`vue3-lazy`

在需要懒加载的地方，使用`<lazy>`组件，将需要懒加载的内容放在`<lazy>`标签内部：

<template>
  <div>
    <lazy :src="imageSrc" alt="image"></lazy>
  </div>
</template>

其中，`imageSrc`为图片的url地址。

5. 完整示例

下面是一个完整的示例：

<template>
  <div>
    <h1>Lazy Load Image Demo</h1>
    <lazy :src="imageSrc" alt="image"></lazy>
  </div>
</template>

<script>
import Lazy from 'vue3-lazy';

export default {
  components: {
    Lazy,
  },
  data() {
    return {
      imageSrc: 'https://picsum.photos/200/300',
    };
  },
};
</script>

在这个示例中，我们导入了`vue3-lazy`，将它注册为组件，在页面中使用`<lazy>`标签懒加载了一张图片。在`data`中定义了图片url的地址。