<think>
我们正在讨论的是在非
脚手架环境下（即没有使用Vue CLI等构建工具）如何在Vue项目中引入vue
-virtual
-scroller。根据引用[
1]和[2]，我们通常是在main
.js中引入vue
-virtual
-scroller及其CSS文件，并使用Vue
.use()来安装它。但是，在没有
脚手架的情况下，项目可能没有使用模块打包工具（如Webpack）或者没有ES6模块支持，因此我们需要考虑传统引入方式。
然而，vue
-virtual
-scroller是
一个npm包，它通常通过模块化的方式引入。如果项目没有使用构建工具，我们可以尝试通过全局script标签引入，但需要确认该库是否提供了UMD版本。
查看vue
-virtual
-scroller的文档，它确实提供了UMD构建版本，我们可以通过CDN引入。
因此，在不使用
脚手架的情况下，我们可以这样引入：
1. 在HTML文件中通过`<script>`标签引入Vue（确保Vue已经引入，因为vue
-virtual
-scroller依赖Vue）。
2
. 引入vue
-virtual
-scroller的UMD文件。
3
. 引入vue
-virtual
-scroller的CSS文件。
步骤：
1. 在HTML的head中引入CSS：
```html
<link rel="stylesheet" href="https://unpkg
.com/vue
-virtual
-scroller@
1.0.10/dist/vue
-virtual
-scroller
.css">
```
2
. 在Vue之后引入vue
-virtual
-scroller的UMD脚本：
```html
<script src="https://unpkg
.com/vue
-virtual
-scroller@
1.0.10/dist/vue
-virtual
-scroller
.umd
.min
.js"></script>
```
3
. 然后，在创建Vue实例之前，我们需要安装这个插件。因为UMD版本会自动将插件暴露为全局变量，我们可以使用`Vue
.use()`来安装：
```html
<script>
Vue
.use(VueVirtualScroller
.default); // 注意：UMD版本导出的是对象，其default属性才是插件
</script>
```
但是，请注意，不同版本的导出方式可能不同，如果直接暴露的是插件函数，则可以直接使用`Vue
.use(VueVirtualScroller)`。我们可以查看控制台或者文档确认。
另一种方式，根据引用[3]和[4]中的使用示例，我们在组件中使用的是`<RecycleScroller>`或`<recycle
-list>`等组件。因此，在全局安装插件后，我们就可以在任意组件中使用这些组件了。
注意：如果遇到问题，比如引用[3]中提到的错误，可能需要设置`key
-field`属性，并且确保每个项都有
一个唯一的键值。
所以，完整的HTML示例：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf
-8">
<title>Vue Virtual Scroller Example</title>
<!
-- 引入vue
-virtual
-scroller的样式
-->
<link rel="stylesheet" href="https://unpkg
.com/vue
-virtual
-scroller@
1.0.10/dist/vue
-virtual
-scroller
.css">
<!
-- 引入Vue
-->
<script src="https://unpkg
.com/vue@2
.6
.14/dist/vue
.js"></script>
<!
-- 引入vue
-virtual
-scroller的UMD文件
-->
<script src="https://unpkg
.com/vue
-virtual
-scroller@
1.0.10/dist/vue
-virtual
-scroller
.umd
.min
.js"></script>
</head>
<body>
<div id="app">
<!
-- 使用RecycleScroller组件
-->
<RecycleScroller
class="scroller"
:items="list"
:item
-size="32"
key
-field="id"
v
-slot="{ item }"
>
<div class="user">
{{ item
.name }}
</div>
</RecycleScroller>
</div>
<script>
// 安装插件
Vue
.use(VueVirtualScroller
.default); // 注意：根据实际暴露的全局变量名调整
new Vue({
el: '#app',
data: {
list: [
{ id:
1, name: 'User
1' },
{ id: 2, name: 'User 2' },
//
... 很多数据
]
}
});
</script>
</body>
</html>
```
注意：上面的示例中，我们使用了`VueVirtualScroller
.default`，这是因为UMD模块将默认导出放在default属性上。如果直接使用`VueVirtualScroller`作为插件对象，我们可能需要查看控制台是否有错误，或者尝试直接使用`VueVirtualScroller`（去掉
.default）。
如果遇到导出问题，可以尝试：
Vue
.use(window['vue
-virtual
-scroller']
.default);
或者，如果库已经将自身安装到Vue上，可能不需要手动调用`Vue
.use`，但通常我们需要显式调用。
另外，引用[3]提到的问题：如果列表项数量很大，可能会遇到“Rendered items limit reached”的错误，这是因为默认渲染项数有限制。可以通过设置`:buffer="
1000"`（或更大的值）来增加缓冲区，或者确保正确设置`item
-size`（每个项的高度）以帮助计算。
总结：
1. 通过CDN引入CSS和
JS。
2
. 使用`Vue
.use`安装插件（注意导出对象）。
3
. 在组件中使用`<RecycleScroller>`等组件，并注意设置正确的属性（如`key
-field`，`item
-size`等）。
最后，建议查阅vue
-virtual
-scroller官方文档以获取最新信息。
</think>在不使用
脚手架（如 Vue CLI）的情况下，在 Vue 项目中引入 `vue
-virtual
-scroller` 需要手动配置。以下是完整的
实现方法：
### 步骤
1：引入依赖
在 HTML 文件中直接引入 CDN 链接：
```html
<!
-- 引入 Vue
-->
<script src="https://cdn
.jsdelivr
.net/
npm/vue@2
.6
.14/dist/vue
.js"></script>
<!
-- 引入 vue
-virtual
-scroller
-->
<link rel="stylesheet" href="https://unpkg
.com/vue
-virtual
-scroller@
1.0.10/dist/vue
-virtual
-scroller
.css">
<script src="https://unpkg
.com/vue
-virtual
-scroller@
1.0.10/dist/vue
-virtual
-scroller
.umd
.js"></script>
```
### 步骤 2：注册组件
在 Vue 实例化前注册虚拟滚动组件：
```html
<script>
// 手动注册组件
Vue
.component('RecycleScroller', VueVirtualScroller
.RecycleScroller)
Vue
.component('DynamicScroller', VueVirtualScroller
.DynamicScroller)
Vue
.component('DynamicScrollerItem', VueVirtualScroller
.DynamicScrollerItem)
new Vue({
el: '#app',
data() {
return {
items: Array
.from({length:
10000}, (_, i) => ({
id: i +
1,
name: `Item ${i +
1}`
}))
}
}
})
</script>
```
### 步骤 3：在模板中使用
```html
<div id="app">
<RecycleScroller
class="scroller"
:items="items"
:item
-size="5
0"
key
-field="id"
v
-slot="{ item }"
>
<div class="item">
{{ item
.name }}
</div>
</RecycleScroller>
</div>
```
### 步骤 4：添加必要的 CSS
```css
.scroller {
height: 5
00px; /* 必须设置固定高度 */
overflow
-y: auto;
border:
1px solid #eee;
}
.item {
height: 5
0px; /* 与 item
-size 保持一致 */
line
-height: 5
0px;
padding:
0 15px;
border
-bottom:
1px solid #f
0f
0f
0;
}
```
### 解决常见问题
1. **`Rendered items limit reached` 错误**
```html
<RecycleScroller
:buffer="2
00" <!
-- 增加缓冲区
-->
:prerender="
10" <!
-- 预渲染数量
-->
>
```
2
. **滚动抖动问题**
```css
.scroller {
overflow
-anchor: none; /* 禁用滚动锚定 */
}
```
3
. **动态高度支持**
```html
<DynamicScroller
:items="items"
:min
-item
-size="5
0"
key
-field="id"
v
-slot="{ item, active }"
>
<DynamicScrollerItem
:item="item"
:active="active"
:data
-index="item
.id"
>
<div :style="{ height: item
.height + 'px' }">
{{ item
.content }}
</div>
</DynamicScrollerItem>
</DynamicScroller>
```
### 完整示例
```html
<!DOCTYPE html>
<html>
<head>
<title>Virtual Scroller without CLI</title>
<link rel="stylesheet" href="https://unpkg
.com/vue
-virtual
-scroller@
1.0.10/dist/vue
-virtual
-scroller
.css">
<style>
#app { font
-family: Arial; }
.scroller { height: 5
00px; border:
1px solid #ddd; }
.item { height: 5
0px; line
-height: 5
0px; padding:
0 15px; border
-bottom:
1px solid #eee; }
.item:hover { background: #f9f9f9; }
</style>
</head>
<body>
<div id="app">
<RecycleScroller
class="scroller"
:items="items"
:item
-size="5
0"
key
-field="id"
v
-slot="{ item }"
>
<div class="item">
{{ item
.id }}
. {{ item
.name }}
</div>
</RecycleScroller>
</div>
<script src="https://cdn
.jsdelivr
.net/
npm/vue@2
.6
.14/dist/vue
.js"></script>
<script src="https://unpkg
.com/vue
-virtual
-scroller@
1.0.10/dist/vue
-virtual
-scroller
.umd
.js"></script>
<script>
// 注册组件
Vue
.component('RecycleScroller', VueVirtualScroller
.RecycleScroller)
new Vue({
el: '#app',
data: {
items: Array
.from({length:
10000}, (_, i) => ({
id: i +
1,
name: `测试项目 ${Math
.random()
.toString(36)
.substr(2, 5)}`
}))
}
});
</script>
</body>
</html>
```
### ⚠ 注意事项
1. **必须设置容器高度**：`
.scroller` 必须设置固定高度
2
. **key
-field 必填**：确保使用唯一键值字段[^3]
3
. **item
-size 匹配**：`:item
-size` 应与 CSS 中的项目高度一致
4
. **避免内联样式**：项目高度变化时使用 `DynamicScroller`
5
. **缓冲区设置**：大数据量时增加 `:buffer` 值防止空白
> 此方法适用于传统 Vue 项目或通过 CDN 引入 Vue 的场景，无需构建工具即可
实现万级数据的流畅滚动[^
1][^2]。
最低0.47元/天 解锁文章
扫一扫
186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
