查看“VuePress Markdown 与 Vue SFC”的源代码


每一个 Markdown 文件，首先都会编译为 HTML ，然后转换为一个 Vue 单文件组件 (SFC) 。换句话说，你可以像写 Vue SFC 一样来写 Markdown 文件：

* <code>&lt;script&gt;</code> 和 <code>&lt;style&gt;</code> 标签会直接被当作 Vue SFC 中的标签。换句话说，它们是从 <code>&lt;template&gt;</code> 标签中提升到了 SFC 的顶层。
* 所有 <code>&lt;script&gt;</code> 和 <code>&lt;style&gt;</code> 标签的以外的内容，会先被编译为 HTML ，然后被当作 Vue SFC 的 <code>&lt;template&gt;</code> 标签。

<div class="warning">

由于 Vue 单文件组件只能包含一个 <code>&lt;script&gt;</code> 标签，你应该避免在 VuePress Markdown 中使用多于一个 <code>&lt;script&gt;</code> 标签。


</div>
我们来看一个例子：

'''输入'''

<pre class="vue">_你好， {{ msg }}_

&lt;RedDiv&gt;

_当前计数为： {{ count }}_

&lt;/RedDiv&gt;

&lt;button @click=&quot;count++&quot;&gt;点我！&lt;/button&gt;

&lt;script setup&gt;
import { h, ref } from 'vue'

const RedDiv = (_, ctx) =&gt; h(
  'div',
  {
    class: 'red-div',
  },
  ctx.slots.default()
)
const msg = 'Markdown 中的 Vue'
const count = ref(0)
&lt;/script&gt;

&lt;style&gt;
.red-div {
  color: red;
}
&lt;/style&gt;</pre>
'''输出'''
<pre>
''你好， {{ msg }}''

<RedDiv>

''当前计数为： {{ count }}''

</RedDiv>

&lt;button @click=“count++”&gt;点我！</button>

<script setup>
import { h, ref } from 'vue'

const RedDiv = (_, ctx) => h(
  'div',
  {
    class: 'red-div',
  },
  ctx.slots.default()
)
const msg = 'Markdown 中的 Vue'
const count = ref(0)
</script>
<style>
.red-div {
  color: red;
}
</style>
</pre>