vue3项目全局适配

要在Vue3项目中进行全局适配，可以使用Vue3提供的全局样式变量功能。具体步骤如下：

1. 在项目中创建一个`variables.css`文件，定义全局样式变量，例如：

:root {
  --primary-color: #1890ff;
  --font-size: 14px;
}

2. 在`main.js`中引入该文件：

import './variables.css'

3. 在组件中使用全局样式变量，例如：

<template>
  <div :style="{ color: 'var(--primary-color)', fontSize: 'var(--font-size)' }">
    Hello World
  </div>
</template>

这样就可以在整个项目中使用定义的全局样式变量了。

相关问题

vue3 中webkit-scrollbar全局样式适配

在 Vue3 中，要对 WebKit 标签滚动条进行全局样式调整，你可以通过 CSS 预处理器如 SCSS 或 Less 来编写一个自定义主题，然后应用到 Vue 组件中。这里是一个基本的例子，展示如何设置滚动条的样式：

// global.scss 或 global.less
$scrollbar-color: #f1f1f1; // 滚动条颜色
$scrollbar-track-color: rgba(0, 0, 0, 0.1); // 轨道颜色

.scrollbar-style {
  /* 这里仅针对 Webkit 浏览器，包括 Chrome、Safari 等 */
  -webkit-scrollbar-color: $scrollbar-color;
  scrollbar-width: thin;

  /* 添加滚动条轨道 */
  .scrollbar-track {
    background-color: $scrollbar-track-color;
  }

  /* 添加滚动条手柄 */
  .scrollbar-thumb {
    background-color: $scrollbar-color;
    border-radius: 5px; // 可选圆角样式
    -webkit-appearance: none; // 移除默认样式
  }

  /* 当鼠标悬停在滚动条上时改变颜色 */
  .scrollbar-thumb:hover {
    background-color: darken($scrollbar-color, 10%);
  }

  /* 当滚动条达到边缘时改变颜色 */
  .scrollbar-thumb:active {
    background-color: darken($scrollbar-color, 15%);
  }
}

/* 现在将这个全局样式应用于 Vue 的根元素 */
html {
  @import "./global.scss"; // 或者在构建时合并到主 CSS 文件中
}

在 Vue 组件中，不需要额外的配置就能应用这些样式，因为它们已经被全局注册了。如果你希望只在部分组件内部应用，可以在那些组件的 `<style>` 标签内引入并覆盖上述样式。

vhvw适配 vue3

vh和vw是CSS中的单位，用于实现响应式布局。在vue3中，你可以通过引入全局的scss文件来使用vh和vw适配方案。首先，在assets/css文件下新建一个global.scss文件，定义vw和vh的计算函数。然后，在vue.config.js文件中进行引入，将全局scss文件导入到项目中。这样，你就可以在Vue组件中愉快地使用vh和vw进行适配了。

代码示例:
在global.scss文件中定义vh和vw的计算函数:

$vm_base: 1920;
$vh_base: 1080;

@function vw($px) {
  @return ($px / $vm_base) * 100vw;
}

@function vh($px) {
  @return ($px / $vh_base) * 100vh;
}

在vue.config.js文件中引入global.scss:

css: {
  loaderOptions: {
    sass: {
      prependData: `@import "@/assets/css/global.scss";`
    }
  }
}