Vue2 CSS小知识点

在Vue2中，CSS的使用可以通过以下几种方式进行：

1. 单文件组件中的<style>标签：可以在Vue组件的单文件中使用<style>标签来添加CSS。

<template>
  <div class="example">Hello, World!</div>
</template>
 
<script>
export default {
  // ...
}
</script>
 
<style scoped>
.example {
  color: red;
}
</style>

2. 全局CSS文件：可以在入口文件（如main.js或app.js）中导入全局CSS文件。

// main.js
import Vue from 'vue';
import App from './App.vue';
import './global.css'; // 全局CSS文件
 
new Vue({
  render: h => h(App),
}).$mount('#app');

3. CSS预处理器：如Sass/SCSS、Less等，需要相关预处理器支持。

<template>
  <div class="example">Hello, World!</div>
</template>
 
<script>
export default {
  // ...
}
</script>
 
<style lang="scss">
$color: red;
 
.example {
  color: $color;
}
</style>

4. CSS Modules：在单文件组件中使用CSS Modules，可以使样式局部作用于组件。

<template>
  <div :class="style.example">Hello, World!</div>
</template>
 
<script>
import style from './style.module.css';
 
export default {
  data() {
    return {
      style,
    };
  },
};
</script>

5. 使用CSS-in-JS库，如styled-components。

import styled from 'styled-components';
 
const StyledDiv = styled.div`
  color: red;
`;
 
export default {
  render() {
    return <StyledDiv>Hello, World!</StyledDiv>;
  },
};

以上是在Vue2中使用CSS的一些方法，具体使用哪种取决于项目需求和开发者偏好。