vue组件里，link引入css样式

在 Vue 组件的模板中，可以使用 `link` 标签引入 CSS 样式。但是需要注意的是，使用 `link` 标签引入的样式会被全局应用，因此需要避免样式污染。

以下是在 Vue 组件中使用 `link` 标签引入 CSS 样式的示例：

<template>
  <div class="my-component">
    <!-- your component code here -->
  </div>
</template>

<link rel="stylesheet" href="./path/to/styles.css">

在上述示例中，`link` 标签被直接放在模板中，这样样式就会被全局应用到该组件以及其子组件中。

如果你想要避免样式污染，可以将 `link` 标签放在组件的 `<script>` 标签中，使用 `import` 或 `require` 引入 CSS 文件，并在 `style` 标签中定义组件的样式，如下所示：

<template>
  <div class="my-component">
    <!-- your component code here -->
  </div>
</template>

<script>
import './path/to/styles.css';

export default {
  name: 'MyComponent',
  // 在这里定义组件的样式
  style: `
    .my-component {
      font-size: 16px;
      color: #333;
    }
  `,
  // ...
}
</script>

或者采用以下方式：

<template>
  <div class="my-component">
    <!-- your component code here -->
  </div>
</template>

<script>
require('./path/to/styles.css');

export default {
  name: 'MyComponent',
  // 在这里定义组件的样式
  style: `
    .my-component {
      font-size: 16px;
      color: #333;
    }
  `,
  // ...
}
</script>

在上述示例中，`import` 或 `require` 语句用于引入 CSS 文件，而组件的样式则定义在 `style` 标签中。这样做可以确保样式只会被应用在该组件中，不会影响其他组件的样式。