boos
e0a5f57793
Vendor the rebranded BoosAPI Desktop client (Tauri + Vue) into metapi as a monorepo subdirectory under desktop/. Source only — node_modules, dist, Cargo target and the upstream .git history are excluded. desktop/ keeps its own independent Cargo workspace (desktop/src-tauri with crates/*); it is not part of the backend boosapi crate, so a `cargo check` at the metapi root still compiles only the backend. Build the desktop app from desktop/src-tauri per desktop/README.md. Note: app icons are still placeholder assets pending the final BoosAPI logo. The updater signing keys live outside the repo and are not included.
472 lines
8.0 KiB
Markdown
472 lines
8.0 KiB
Markdown
# Vue 2 快速开始
|
||
|
||
在你的 Vue 2 项目中开始使用 markstream-vue2。
|
||
|
||
## 基础设置
|
||
|
||
### 1. 安装
|
||
|
||
首先，安装包：
|
||
|
||
```bash
|
||
pnpm add markstream-vue2
|
||
```
|
||
|
||
### 2. 导入样式
|
||
|
||
在你的主入口文件（如 `main.js` 或 `main.ts`）中：
|
||
|
||
```js
|
||
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. 使用组件
|
||
|
||
```vue
|
||
<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 支持：
|
||
|
||
```vue
|
||
<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`：
|
||
|
||
```bash
|
||
pnpm add @vue/composition-api
|
||
```
|
||
|
||
```js
|
||
import VueCompositionAPI from '@vue/composition-api'
|
||
// main.js
|
||
import Vue from 'vue'
|
||
import 'markstream-vue2/index.css'
|
||
|
||
Vue.use(VueCompositionAPI)
|
||
```
|
||
|
||
然后使用方式与 Vue 2.7 相同：
|
||
|
||
```vue
|
||
<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>
|
||
```
|
||
|
||
## 启用可选功能
|
||
|
||
### 代码语法高亮
|
||
|
||
安装依赖：
|
||
|
||
```bash
|
||
pnpm add stream-markdown
|
||
```
|
||
|
||
```vue
|
||
<script>
|
||
import MarkdownRender, { MarkdownCodeBlockNode, setCustomComponents } from 'markstream-vue2'
|
||
|
||
// 在 MarkdownRender 中使用 Shiki 代码块
|
||
setCustomComponents({ code_block: MarkdownCodeBlockNode })
|
||
|
||
export default {
|
||
components: { MarkdownRender },
|
||
data() {
|
||
return {
|
||
markdown: `\`\`\`javascript
|
||
const hello = 'world'
|
||
console.log(hello)
|
||
\`\`\``
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<MarkdownRender :content="markdown" />
|
||
</template>
|
||
```
|
||
|
||
### Mermaid 图表
|
||
|
||
安装 mermaid：
|
||
|
||
```bash
|
||
pnpm add mermaid
|
||
```
|
||
|
||
导入样式。默认 loader 已经启用，只有在你手动关闭或需要自定义 loader 时才需要调用 `enableMermaid()`：
|
||
|
||
```js
|
||
import { enableMermaid } from 'markstream-vue2'
|
||
// main.js
|
||
import 'markstream-vue2/index.css'
|
||
|
||
// 可选：重新启用或覆盖 loader
|
||
enableMermaid()
|
||
```
|
||
|
||
```vue
|
||
<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>
|
||
```
|
||
|
||
### D2 图表
|
||
|
||
安装 D2：
|
||
|
||
```bash
|
||
pnpm add @terrastruct/d2
|
||
```
|
||
|
||
导入样式。默认 loader 已经启用，只有在你手动关闭或需要自定义 loader 时才需要调用 `enableD2()`：
|
||
|
||
```js
|
||
import { enableD2 } from 'markstream-vue2'
|
||
// main.js
|
||
import 'markstream-vue2/index.css'
|
||
|
||
// 可选：重新启用或覆盖 loader
|
||
enableD2()
|
||
```
|
||
|
||
```vue
|
||
<script>
|
||
import MarkdownRender from 'markstream-vue2'
|
||
|
||
export default {
|
||
components: { MarkdownRender },
|
||
data() {
|
||
return {
|
||
markdown: `#### D2 图表
|
||
|
||
\`\`\`d2
|
||
direction: right
|
||
Client -> API: request
|
||
API -> DB: query
|
||
DB -> API: rows
|
||
API -> Client: response
|
||
\`\`\``
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<MarkdownRender :content="markdown" />
|
||
</template>
|
||
```
|
||
|
||
### 数学公式（KaTeX）
|
||
|
||
安装 katex：
|
||
|
||
```bash
|
||
pnpm add katex
|
||
```
|
||
|
||
导入样式。默认 loader 已经启用，只有在你手动关闭或需要自定义 loader 时才需要调用 `enableKatex()`：
|
||
|
||
```js
|
||
import { enableKatex } from 'markstream-vue2'
|
||
// main.js
|
||
import 'markstream-vue2/index.css'
|
||
|
||
import 'katex/dist/katex.min.css'
|
||
|
||
// 可选：重新启用或覆盖 loader
|
||
enableKatex()
|
||
```
|
||
|
||
```vue
|
||
<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` 自定义特定节点的渲染方式：
|
||
|
||
```vue
|
||
<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 生成的内容：
|
||
|
||
```vue
|
||
<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：
|
||
|
||
```js
|
||
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 组件文档](/zh/guide/vue2-components) 了解所有可用组件
|
||
- 查看 [API 参考](/zh/guide/api) 获取详细 API 文档
|
||
- 查看 [示例](/zh/guide/examples) 获取更多使用示例
|