vue 引入css样式

在Vue中引入CSS样式有两种方式：内嵌式和外联式。
1. 内嵌式：在Vue组件中使用style标签来定义CSS样式，例如：

<template>
  <div class="container">
    <p class="text">Hello World!</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {}
  },
  style: `
    .container {
      width: 100px;
      height: 100px;
      border: 1px solid #ccc;
    }
    .text {
      font-size: 16px;
      color: red;
    }
  `
}
</script>

2. 外联式：在Vue组件中使用link标签来引入外部CSS文件，例如：

<template>
  <div class="container">
    <p class="text">Hello World!</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {}
  },
  mounted() {
    const link = document.createElement('link')
    link.rel = 'stylesheet'
    link.href = 'wcss.css'
    document.head.appendChild(link)
  }
}
</script>

其中，wcss.css是外部CSS文件的路径。