DemoPreview 测试（dir / src / 内联）
目录引入
vue
<template>
<div class="dir-demo">
<p>我是目录引入模式（dir）的演示组件</p>
<button @click="count++">点了 {{ count }} 次</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<style scoped>
.dir-demo {
text-align: center;
}
.dir-demo button {
padding: 8px 16px;
border-radius: 6px;
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg);
cursor: pointer;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
文件引入
vue
<template>
<button class="src-demo" @click="count++">文件引入：{{ count }}</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<style scoped>
.src-demo {
padding: 8px 16px;
border-radius: 6px;
border: 1px solid var(--vp-c-divider);
background: var(--vp-c-bg);
cursor: pointer;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
内联代码
vue
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<button style="padding: 8px 16px; border-radius: 6px; border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg); cursor: pointer; color: rgb(var(--fx-beam-c1)); font-weight: 600;" @click="count++">内联预览：{{ count }}</button>1
2
3
4
5
2
3
4
5