在markdown中使用vue
本文档参考vitepress官网
介绍
可以在markdown中使用vue的语法
模板
插值
比如你这样写
markdown
{{ 1 + 1 }}
1
它其实会显示2
指令
比如
markdown
<span v-for="i in 3">{{ i + ' ' }}</span>
1
它会输出
1 2 3
使用useData获取页面数据
markdown
<script setup>
import { useData } from 'vitepress'
const { page } = useData()
</script>
<pre>{{ page }}</pre>
1
2
3
4
5
6
7
2
3
4
5
6
7
会输出
markdown
{
"title": "在markdown中使用vue",
"description": "",
"frontmatter": {
"title": "在markdown中使用vue",
"outline": 2
},
"headers": [
{
"level": 2,
"title": "介绍",
"slug": "介绍",
"link": "#介绍",
"children": [
{
"level": 3,
"title": "插值",
"slug": "插值",
"link": "#插值",
"children": []
},
{
"level": 3,
"title": "指令",
"slug": "指令",
"link": "#指令",
"children": []
}
]
}
],
"relativePath": "vitepress/Vue与Markdown.md",
"lastUpdated": 1667953978000
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
v-pre
使用v-pre包装可以忽略vitepress对markdown的影响
比如
markdown
::: v-pre
`{{ This will be displayed as-is }}`
:::
1
2
3
2
3
它输出
{{ This will be displayed as-is }}
如果不包装，就会因为vue的插值语法而报错，因为字符串没加引号
使用组件
引入组件
我写了个test.vue文件，当作组件，内容是
vue
<script setup lang="ts">
import { onMounted, ref } from 'vue';
const count = ref(0)
onMounted(()=>{
setInterval(()=>{
count.value++
},1000)
})
</script>
<template>
<div>
{{count}}
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
现在引入并使用它
markdown
<script setup>
import Test from './components/test.vue'
</script>
<Test />
1
2
3
4
5
2
3
4
5
它会自动计数，如下：
0
在theme中注册全局组件
在.vitepress/theme/index.ts里这么写
js
import DefaultTheme from 'vitepress/theme'
import Test1 from '../../components/test.vue'
export default {
...DefaultTheme,
enhanceApp(ctx) {
DefaultTheme.enhanceApp(ctx)
ctx.app.component('Test1', Test1)
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
Test1是一个全局组件，作用和上面的那个组件差不多，只不过每次加2
0
在标题中使用vue组件
比如：下面加一个用于测试的4级标题，使用之前的计数器组件
计数器 0
0
它的写法如下：
markdown
计数器 <div style="display: inline-block;"><Test /></div>
1
使用css预处理器
它支持.sass .scss less .styl .stylus文件
我们使用sass进行测试
安装
shell
npm install -D sass
1
使用：测试一段文字，使其颜色为蓝色加粗
这是一段文字
在markdown里是这么写的
markdown
<div class="text">这是一段文字</div>
<style lang="sass" scoped>
.text
color: blue
font-weight: bold
</style>
1
2
3
4
5
6
2
3
4
5
6
脚本和样式提升
这个参考官方文档