如何在vue文件中引入css样式，写一份示例代码

你好，关于你的问题，以下是示例代码：

在vue组件中引入样式的方式有两种：

1. 使用import导入样式文件

在.vue文件中，可以使用import语句导入CSS文件，然后在<style>标记中使用这些样式。代码如下：

<template>
<div class="my-component">
<h1>Hello World</h1>
</div>
</template>

<script>
import styles from './styles.css'

export default {
name: 'MyComponent'
}
</script>

<style>
.my-component {
background-color: #fff;
color: #333;
}

/* import的样式 */
${styles}
</style>

2. 直接在<style>标记中编写CSS样式

你也可以直接在vue组件的<style>标记中编写CSS样式，如下所示：

<template>
<div class="my-component">
<h1>Hello World</h1>
</div>
</template>

<script>
export default {
name: 'MyComponent'
}
</script>

<style>
.my-component {
background-color: #fff;
color: #333;
}
</style>

以上是关于在vue组件中引入CSS样式的示例代码，希望能够解答你的问题。