Vue 2 快速开始

在你的 Vue 2 项目中开始使用 markstream-vue2。

基础设置

1. 安装

首先，安装包：

pnpm add markstream-vue2

2. 导入样式

在你的主入口文件（如 main.js 或 main.ts）中：

import Vue from 'vue'
import App from './App.vue'
import 'markstream-vue2/index.css'

// 对于 Vue 2.6.x，还需要安装并配置 @vue/composition-api
// import VueCompositionAPI from '@vue/composition-api'
// Vue.use(VueCompositionAPI)

new Vue({
  render: h => h(App)
}).$mount('#app')

3. 使用组件

<script>
import MarkdownRender from 'markstream-vue2'

export default {
  name: 'App',
  components: {
    MarkdownRender
  },
  data() {
    return {
      markdown: `# Hello Vue 2!

这是 **markstream-vue2** - 适用于 Vue 2 的流式 Markdown 渲染器。

## 功能

- 代码语法高亮
- Mermaid 图表
- 数学公式
- 还有更多功能！

\`\`\`javascript
console.log('Hello from Vue 2!')
\`\`\`
`
    }
  }
}
</script>

<template>
  <div id="app">
    <MarkdownRender :content="markdown" />
  </div>
</template>

使用 Vue 2.7+（Composition API）

Vue 2.7 内置了 Composition API 支持：

<script>
import MarkdownRender from 'markstream-vue2'
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'App',
  components: {
    MarkdownRender
  },
  setup() {
    const markdown = ref(`# Hello Vue 2.7!

这使用了 Composition API。

\`\`\`javascript
const message = 'Hello from Vue 2.7!'
console.log(message)
\`\`\`
`)
    return { markdown }
  }
})
</script>

<template>
  <div id="app">
    <MarkdownRender :content="markdown" />
  </div>
</template>

使用 Vue 2.6.x（@vue/composition-api）

对于 Vue 2.6.x，安装 @vue/composition-api：

pnpm add @vue/composition-api

import VueCompositionAPI from '@vue/composition-api'
// main.js
import Vue from 'vue'
import 'markstream-vue2/index.css'

Vue.use(VueCompositionAPI)

然后使用方式与 Vue 2.7 相同：

<script>
import { defineComponent, ref } from '@vue/composition-api'
import MarkdownRender from 'markstream-vue2'

export default defineComponent({
  name: 'App',
  components: {
    MarkdownRender
  },
  setup() {
    const markdown = ref(`# Hello Vue 2.6!

这使用了 @vue/composition-api。
`)
    return { markdown }
  }
})
</script>

<template>
  <div id="app">
    <MarkdownRender :content="markdown" />
  </div>
</template>

启用可选功能

代码语法高亮

安装依赖：

pnpm add shiki stream-markdown

<script>
import MarkdownRender from 'markstream-vue2'

export default {
  components: { MarkdownRender },
  data() {
    return {
      markdown: `\`\`\`javascript
const hello = 'world'
console.log(hello)
\`\`\``
    }
  }
}
</script>

<template>
  <MarkdownRender :content="markdown" />
</template>

Mermaid 图表

安装 mermaid：

pnpm add mermaid

导入样式并启用加载器：

import { enableMermaid } from 'markstream-vue2'
// main.js
import 'markstream-vue2/index.css'

enableMermaid()

<script>
import MarkdownRender from 'markstream-vue2'

export default {
  components: { MarkdownRender },
  data() {
    return {
      markdown: `#### Mermaid 图表

\`\`\`mermaid
graph TD
    A[开始] --> B{能用吗？}
    B -->|是| C[太好了！]
    B -->|否| D[继续尝试]
\`\`\``
    }
  }
}
</script>

<template>
  <MarkdownRender :content="markdown" />
</template>

数学公式（KaTeX）

安装 katex：

pnpm add katex

导入样式并启用加载器：

import { enableKatex } from 'markstream-vue2'
// main.js
import 'markstream-vue2/index.css'

import 'katex/dist/katex.min.css'

enableKatex()

<script>
import MarkdownRender from 'markstream-vue2'

export default {
  components: { MarkdownRender },
  data() {
    return {
      markdown: `#### 数学示例

行内数学公式：$E = mc^2$

块级数学公式：

$$
\\int_0^\\infty e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}
$$`
    }
  }
}
</script>

<template>
  <MarkdownRender :content="markdown" />
</template>

自定义组件

你可以使用 setCustomComponents 自定义特定节点的渲染方式：

<script>
import MarkdownRender, { setCustomComponents } from 'markstream-vue2'

// 创建自定义标题组件
const CustomHeading = {
  name: 'CustomHeading',
  props: ['node'],
  render(h) {
    const level = this.node.level || 1
    const Tag = `h${level}`
    return h(Tag, { class: 'custom-heading' }, this.node.children.map(c => c.content))
  }
}

export default {
  components: { MarkdownRender },
  data() {
    return {
      markdown: `# 自定义标题

此标题使用自定义组件渲染。
`
    }
  },
  mounted() {
    // 注册自定义组件
    setCustomComponents('my-app', {
      heading: CustomHeading
    })
  }
}
</script>

<template>
  <div>
    <MarkdownRender
      custom-id="my-app"
      :content="markdown"
    />
  </div>
</template>

<style scoped>
.custom-heading {
  color: #e11d48;
  border-bottom: 2px solid #e11d48;
  padding-bottom: 0.5rem;
}
</style>

流式内容

markstream-vue2 支持流式 markdown 内容，适用于 AI 生成的内容：

<script>
import MarkdownRender from 'markstream-vue2'

export default {
  components: { MarkdownRender },
  data() {
    return {
      markdown: '',
      fullText: `# 流式传输演示

此内容正在**逐字符**流式传输。

## 功能

1. 渐进式渲染
2. 无布局偏移
3. 流畅动画

\`\`\`javascript
const streaming = true
console.log('流式传输已启用:', streaming)
\`\`\`
`
    }
  },
  methods: {
    startStreaming() {
      this.markdown = ''
      let i = 0
      const interval = setInterval(() => {
        if (i < this.fullText.length) {
          this.markdown += this.fullText[i]
          i++
        }
        else {
          clearInterval(interval)
        }
      }, 20)
    }
  }
}
</script>

<template>
  <div>
    <button @click="startStreaming">
      开始流式传输
    </button>
    <MarkdownRender :content="markdown" />
  </div>
</template>

VitePress 集成（Vue 2）

对于使用 Vue 2 的 VitePress，你可以在自定义主题中使用 markstream-vue2：

import MarkdownRender, { setCustomComponents } from 'markstream-vue2'
// docs/.vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import 'markstream-vue2/index.css'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    // 全局注册组件
    app.component('MarkdownRender', MarkdownRender)

    // 设置自定义组件（如果需要）
    setCustomComponents('vitepress', {
      // 你的自定义组件
    })
  }
}

下一步

• 查看 Vue 2 组件文档 了解所有可用组件
• 查看 API 参考 获取详细 API 文档
• 查看 示例 获取更多使用示例