vue 引入css

在Vue中引入CSS可以有多种方式，最常见的是使用`<style>`标签和单独的CSS文件。

1. 使用`<style>`标签：在Vue组件中，可以使用`<style>`标签来定义组件的样式。例如：

<template>
  <div class="my-component">
    <!-- 组件内容 -->
  </div>
</template>

<script>
  export default {
    name: 'MyComponent',
    // 在这里定义组件样式
    // 可以使用CSS选择器来选中组件内部的元素
    // 也可以使用Vue提供的scoped属性来限制样式的作用域
    // 例如：.my-component h1 { color: red; }
    // 或者：.my-component >>> h1 { color: red; }
    // 注意：scoped属性只能在Vue2.0及以上版本中使用
    // 在Vue3.0中，可以使用新的CSS模块化方案
    // 详情请参考Vue官方文档
    <style scoped>
      .my-component {
        background-color: #fff;
        padding: 20px;
      }
      h1 {
        color: #333;
      }
    </style>
  }
</script>

2. 使用单独的CSS文件：如果需要在多个组件中共享同样的样式，可以将样式定义在单独的CSS文件中，并在组件中引入。例如：

<template>
  <div class="my-component">
    <!-- 组件内容 -->
  </div>
</template>

<script>
  // 在这里引入CSS文件
  import './my-component.css';

  export default {
    name: 'MyComponent',
    // 组件定义
  }
</script>

在这个例子中，我们使用ES6的`import`语法来引入CSS文件。需要注意的是，如果需要使用CSS预处理器（如Sass、Less等），需要先安装相应的loader，并在webpack配置文件中进行相应的配置。