VUE2中如何修改全局样式，将浏览器的滚动条变细

在 Vue2 中，可以使用 `::v-deep` 选择器来修改全局样式，以自定义滚动条的样式。具体步骤如下：

1. 在 `App.vue` 或者主组件的 `.vue` 文件中，添加下面的 CSS 样式，以覆盖浏览器默认的滚动条样式：

/* 修改滚动条样式 */
::v-deep ::-webkit-scrollbar {
  width: 5px; /* 设置滚动条宽度 */
}

::v-deep ::-webkit-scrollbar-thumb {
  background-color: #ccc; /* 设置滚动条拖动块的颜色 */
}

::v-deep ::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 设置滚动条背景颜色 */
}

2. 在需要修改样式的组件中，使用 `scoped` 属性来限制样式的作用域，避免样式冲突：

<template>
  <div class="container">
    <!-- ...组件内容... -->
  </div>
</template>

<style scoped>
/* 在组件中，使用 scoped 属性限制样式作用域 */
.container {
  height: 200px;
  overflow-y: auto; /* 设置为自动滚动 */
}
</style>

需要注意的是，`::v-deep` 选择器只能用于 Vue 组件中，以避免样式污染和冲突。同时，`::v-deep` 选择器是 Vue2 版本的语法，如果使用 Vue3，可以使用 `/deep/` 或者 `>>>` 选择器来实现同样的效果。