vite + vue3 怎么创建 link 元素并添加到文档中

在 Vite + Vue 3 中创建 `<link>` 元素并将其添加到文档中，可以通过以下步骤实现：

1. 在 Vue 3 组件中，首先导入 `onMounted` 钩子函数和 `ref` 函数：

import { onMounted, ref } from 'vue';

2. 创建一个 `link` 的 `ref` 引用，用于引用创建的 `<link>` 元素：

const linkRef = ref<HTMLLinkElement | null>(null);

3. 在 `onMounted` 钩子函数中，创建 `<link>` 元素并设置相关属性，例如 `rel`、`href`、`type` 等：

onMounted(() => {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = '/path/to/your/css/file.css';
  link.type = 'text/css';

  linkRef.value = link; // 将创建的 link 元素赋值给 linkRef
});

4. 如果需要在组件销毁时移除 `<link>` 元素，可以在 `onUnmounted` 钩子函数中进行移除操作：

onUnmounted(() => {
  if (linkRef.value) {
    linkRef.value.remove();
    linkRef.value = null;
  }
});

5. 最后，在组件的模板中，可以通过 `v-if` 指令来判断是否需要渲染该 `<link>` 元素：

<template>
  <div>
    <!-- ...其他内容... -->
    <link ref="linkRef" v-if="linkRef" />
  </div>
</template>

这样就可以将创建的 `<link>` 元素动态地添加到文档中。请根据具体需求调整路径和其他属性。