MDX 安装与初始配置指南

2025-05-10 201 阅读1分钟

引言

MDX 让你在 Markdown 文档中嵌入 React 组件，实现内容与交互的统一。下面将介绍如何在本地项目中快速搭建 MDX 环境。

环境准备

Node.js 16 及以上（建议使用最新版）
推荐使用 npm 或 yarn 作为包管理工具

安装步骤

初始化项目
```
npm init -y
```

安装 MDX 及依赖

npm install @mdx-js/mdx @mdx-js/react react react-dom

创建第一个 MDX 文件

在项目根目录下新建 hello.mdx 文件，内容如下：
```
# Hello, MDX
这是你的第一个 MDX 文件！
```

常见问题

依赖安装失败？
- 检查 Node.js 版本，确保网络畅通。
- 可尝试更换 npm 源：
```
npm config set registry https://registry.npmmirror.com
```

总结

MDX 的安装与配置非常简单，几步即可让你的文档支持组件和交互。下一步，我们将体验 MDX 文件的实际运行与渲染。