vue3如何引入 katex 插件

在 Vue3 中引入 KaTeX 数学公式插件，你可以按照以下步骤操作：

1. **安装依赖**：
首先，你需要通过 npm 或 yarn 安装 KaTeX 和 Vue 的计算属性绑定插件 `vue-katex`。在命令行中运行：

   npm install katex @vue/katex --save
   或者
   yarn add katex @vue/katex

2. **配置文件**：
如果你在 `main.js` 或 `setupTS` 等全局脚本中引入，可以这样设置：

   import { createApp } from 'vue'
   import App from './App.vue'
   import { useKatex } from '@vue/katex'

   // 引入并初始化 KaTeX
   const katex = await useKatex()

   createApp(App)
     .use(katex) // 将 KaTeX 插件挂载到 Vue 实例上
     .mount('#app')

如果你想让 KaTeX 只在需要的地方生效，可以在组件内导入 `useKatex` 并在 `<template>` 中使用。

3. **在模板中使用**：
使用 `v-katex` 指令插入数学表达式，例如：

   <template>
     <div>
       <span v-katex="{ display: true }">e^{i\pi} + 1 = 0</span>
     </div>
   </template>

这里 `{ display: true }` 表示公式将以块级显示模式渲染。

4. **注意点**：
- `useKatex` 返回的是一个 promise，因为它需要在 DOM 渲染完成后才能正常工作。
- 对于复杂的公式，记得包含 KaTeX 的 CDN 资源：

     <script async src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.15.1/katex.min.js" integrity="sha512-yOcI7D+Hh6pGJjXfMf5oUq5tL9rU+yFZg6JQz0B8x0n8vK8PnYF5XlUOweVfIDWwGqHhJZ1U+b5g=="></script>
     <script async src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.15.1/contrib/auto-render.min.js" integrity="sha512-bXlMSR1RHzOZjUxVdDav+TLCuZJxHlMQyjE+8dHiUXFnZkjENpHRIm7UG0mazRswp6TY7G9+tuftm+cq==" crossorigin></script>