# @f3ve/vue-markdown-it 中文文档

规范地址：https://npmcn.com/package/%40f3ve/vue-markdown-it/

版本：0\.2\.3
npm 元数据更新时间：2024-10-26T19:10:01.125Z
中文译文更新时间：2026-11-14T07:33:42.512Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40f3ve/vue-markdown-it
原文对照：https://npmcn.com/package/%40f3ve/vue-markdown-it/?lang=original
项目主页：https://github.com/f3ve/vue-markdown-it#readme
源码仓库：https://github.com/f3ve/vue-markdown-it

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：254 kB，11 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：vue ^3\.3\.4
- 首次发布：2023-09-14T10:16:56.397Z
- 最新版本发布：2024-10-26T19:10:00.955Z
- 近 30 天下载量：6876（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：6（近 12 个月 0 个）

## 中文简介

第3个减值组件

## 安装

```sh
npm install @f3ve/vue-markdown-it
```

也可以使用：`pnpm add @f3ve/vue-markdown-it`、`yarn add @f3ve/vue-markdown-it`、`bun add @f3ve/vue-markdown-it`

## README

[![Contributors](https://img.shields.io/github/contributors/f3ve/vue-markdown-it.svg?style=for-the-badge)](https://github.com/f3ve/vue-markdown-it/graphs/contributors) [![Forks](https://img.shields.io/github/forks/f3ve/vue-markdown-it.svg?style=for-the-badge)](https://github.com/f3ve/vue-markdown-it/network/members) [![Stargazers](https://img.shields.io/github/stars/f3ve/vue-markdown-it.svg?style=for-the-badge)](https://github.com/f3ve/vue-markdown-it/stargazers) [![Issues](https://img.shields.io/github/issues/f3ve/vue-markdown-it.svg?style=for-the-badge)](https://github.com/f3ve/vue-markdown-it/issues) [![MIT License](https://img.shields.io/github/license/f3ve/vue-markdown-it.svg?style=for-the-badge)](https://github.com/f3ve/vue-markdown-it/blob/master/LICENSE.txt)

  

# 摇摆下旗

第3个减值组件  
[**探索文件“**](https://github.com/f3ve/vue-markdown-it)  
[报告错误](https://github.com/f3ve/vue-markdown-it/issues) • 妇女 [请求特性](https://github.com/f3ve/vue-markdown-it/issues)

目录

1.  [关于项目](https://npmcn.com/package/%40f3ve/vue-markdown-it/#readme-about-the-project)
    -   [内设](https://npmcn.com/package/%40f3ve/vue-markdown-it/#readme-built-with)
2.  [开始](https://npmcn.com/package/%40f3ve/vue-markdown-it/#readme-getting-started)
    -   [先决条件](https://npmcn.com/package/%40f3ve/vue-markdown-it/#readme-prerequisites)
    -   [安装](https://npmcn.com/package/%40f3ve/vue-markdown-it/#readme-installation)
3.  [使用量](https://npmcn.com/package/%40f3ve/vue-markdown-it/#readme-usage)
4.  [路线图](https://npmcn.com/package/%40f3ve/vue-markdown-it/#readme-roadmap)
5.  [捐款](https://npmcn.com/package/%40f3ve/vue-markdown-it/#readme-contributing)
6.  [许可证](https://npmcn.com/package/%40f3ve/vue-markdown-it/#readme-license)
7.  [联系人](https://npmcn.com/package/%40f3ve/vue-markdown-it/#readme-contact)
8.  [承认](https://npmcn.com/package/%40f3ve/vue-markdown-it/#readme-acknowledgments)

## 关于项目

这是方便整合的组成部分 [缩放](https://github.com/markdown-it/markdown-it) 内 [第3组](https://vuejs.org/)。这个项目的灵感来自 [减速](https://github.com/ravenq/markdown-it-vue). 它有一段时间没有更新过,只支持Vue 2.

(单位:千美元)[返回顶端](https://npmcn.com/package/%40f3ve/vue-markdown-it/#readme-top)(中文(简体) )

### 内设

-   [![Vue](https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D)](https://vuejs.org/)
-   [![Vite](https://img.shields.io/badge/VITE-35495E?style=for-the-badge&logo=vite)](https://vitejs.dev/)

(单位:千美元)[返回顶端](https://npmcn.com/package/%40f3ve/vue-markdown-it/#readme-top)(中文(简体) )

## 开始

### 先决条件

-   第3组

```bash
npm i vue
```

### 安装

```
npm i @f3ve/vue-markdown-it
```

(单位:千美元)[返回顶端](https://npmcn.com/package/%40f3ve/vue-markdown-it/#readme-top)(中文(简体) )

## 使用量

### 导入组件

您可以直接导入您的 SFC 文件的组件 .

#### 单位 [`<script setup>`](https://vuejs.org/api/sfc-script-setup.html#basic-syntax) 语法

```vue
<!-- Vue 3 setup script syntax -->
<script setup>
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';

const post = ref();

onMounted(async () => {
  const res = await api.get('/post');
  post.value = res.data;
});
</script>

<template>
  <vue-markdown-it :source="post" />
</template>
```

#### 定期 `<script>` 语法

```vue
<script setup>
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';

export default {
  components: {
    VueMarkdownIt
  }
  setup() {
    const post = ref();

    onMounted(async () => {
      const res = await api.get('/post');
      post.value = res.data;
    });
  }
}
</script>

<template>
  <vue-markdown-it :source="post" />
</template>
```

### 使用插件

您也可以使用插件在全球注册组件 .

```js
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { VueMarkdownItPlugin } from '@f3ve/vue-markdown-it';

const app = createApp(App);

app.use(VueMarkdownItPlugin);

app.mount('#app');
```

### 使用减记插件

您可以使用 `plugin` 道具 (英语). `plugin` 需要一系列的下调插件 。 如果您想要配置插件的选项, 您可以在数组中嵌入插件及其选项 .

```vue
<script setup>
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';
import myPlugin from 'myPlugin';
import myPluginWithOption from 'myPluginWithOptions';

const post = ref();

onMounted(async () => {
  const res = await api.get('/post');
  post.value = res.data;
});
</script>

<template>
  <vue-markdown-it
    :source="post"
    :plugins="[myPlugin, [myPluginWithOptions, { option1: true }]]"
  />
</template>
```

### 使用 Markdown- it 选项和预设

见 [标记- 它的文档](https://markdown-it.github.io/markdown-it/#MarkdownIt.new) 更多信息

#### 选项

> _注意:我用的是Vue语 [脚本设置](https://vuejs.org/api/sfc-script-setup.html#basic-syntax) 这些例子中的语法. 如果你没有使用脚本设置 确保 [注册组件](https://vuejs.org/guide/components/registration.html#local-registration) 在使用之前._

```vue
<script setup>
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';

const post = ref();
const options = {
  html: true,
  linkify: true,
};

onMounted(async () => {
  const res = await api.get('/post');
  post.value = res.data;
});
</script>

<template>
  <vue-markdown-it :source="post" :options="options" />
</template>
```

#### 预设

```vue
<script setup>
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';

const post = ref();

onMounted(async () => {
  const res = await api.get('/post');
  post.value = res.data;
});
</script>

<template>
  <vue-markdown-it :source="post" preset="commonmark" />
</template>
```

#### 一起使用预设和选项

```vue
<script setup>
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';

const post = ref();
const options = {
  html: true,
  linkify: true,
};

onMounted(async () => {
  const res = await api.get('/post');
  post.value = res.data;
});
</script>

<template>
  <vue-markdown-it :source="post" :options="options" preset="commonmark" />
</template>
```

(单位:千美元)[返回顶端](https://npmcn.com/package/%40f3ve/vue-markdown-it/#readme-top)(中文(简体) )

## 路线图

见 [未决问题](https://github.com/f3ve/vue-markdown-it/issues) (c) 列出所有拟议特点(和已知问题).

(单位:千美元)[返回顶端](https://npmcn.com/package/%40f3ve/vue-markdown-it/#readme-top)(中文(简体) )

## 捐款

[见贡献指南](https://github.com/f3ve/.github/blob/main/CONTRIBUTING.md)

(单位:千美元)[返回顶端](https://npmcn.com/package/%40f3ve/vue-markdown-it/#readme-top)(中文(简体) )

## 许可证

分发于 [MIT 许可证](https://github.com/f3ve/vue-markdown-it/blob/main/LICENSE)。 。 。 .

(单位:千美元)[返回顶端](https://npmcn.com/package/%40f3ve/vue-markdown-it/#readme-top)(中文(简体) )

## 常见问题

### @f3ve/vue-markdown-it 是什么？

第3个减值组件

### 如何安装 @f3ve/vue-markdown-it？

在项目目录运行 npm install @f3ve/vue-markdown-it，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.3\.4）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @f3ve/vue-markdown-it 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @f3ve/vue-markdown-it 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @f3ve/vue-markdown-it 可以商用吗？

@f3ve/vue-markdown-it 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @f3ve/vue-markdown-it 的下载量有多少？

根据 npm 官方下载统计，@f3ve/vue-markdown-it 在 2026/10/14 – 2026/11/12 这 30 天内被下载 6,876 次，日均约 229 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @f3ve/vue-markdown-it 还在维护吗？

最新版本 0\.2\.3 发布于 2024/10/27（2 年前）；至今共发布 6 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/09/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。