vite创建的vue3项目如何使用mdx

Vite（原名VuePressify）是一个快速的前端构建工具，特别适合于Vue.js应用。MDX（Markdown + JSX）是一种结合了Markdown语法和JSX表达式的标记语言，可以用于编写文档和轻量级的组件。

要在Vite创建的Vue3项目中使用MDX，你需要做以下几个步骤：

1. **安装依赖**：
首先，在项目根目录下运行`npm install @vuepress/mdx` 或 `yarn add @vuepress/mdx` 来安装VuePress的MDX插件。

2. **配置文件**：
更新`.vuepress.config.js` 文件，确保包含MDX的支持，添加以下内容到`transpileDependencies`数组中：

   transpileDependencies: ['@vuepress/markdown', '@vuepress/mdx'],

还可以在`plugins`部分配置MDX支持：

   plugins: [
     // ...其他插件
     {
       resolve: '@vuepress/plugin-mdx',
       options: {
         extension: /\.mdx?$/,
       },
     },
   ],

3. **撰写MDX内容**：
创建一个新的`.mdx`文件，比如`docs/tutorial.mdx`，编写Markdown文本，并插入JSX块来动态渲染组件或HTML结构。

4. **在Vue组件中引用MDX**：
可以在组件内使用`import`导入MDX内容，然后在模板中使用`<template lang="mdx">...</template>`标签显示它。

<template>
  <div>
    <h1 slot="header">
      <template #default>{{ $frontmatter.title }}</template>
    </h1>
    <template lang="mdx">{{ content }}</template>
  </div>
</template>

<script>
export default {
  components: { MyComponent },
  async setup() {
    const post = await import('./my-tutorial.mdx');
    return { post };
  },
};
</script>