Vue 模板
在 Vue 中，我们称 **template** 为我们 Vue 应用程序的 HTML 部分。
<template> 标签稍后将在 *.vue 文件中使用，以更好地组织我们的代码。
可以使用 **template** 作为 Vue 实例中的一个配置选项，并将 HTML 代码放在其中。
Vue 模板
让我们看一个使用 'template' 作为配置选项的例子。这是一个简单的例子，我们只是将 HTML 部分移到了配置选项 'template' 中
示例
来自 <div id="app"> 内部的 HTML 内容被移到了配置选项 'template' 中，并用反引号 `...` 包围。我们可以在反引号内编写多行 HTML。
<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
template
`<h1>{{ message }}</h1>
<p>这是第二行 HTML 代码，在反引号内</p>`，
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script>
自己动手试一试 »
单文件组件 (SFC)
正如您在上面的代码示例中所看到的，我们的 Vue 应用程序的 HTML 部分也可以聚集在 Vue 实例内部，但这并没有让 HTML 文件更容易概览。
为了获得更好的概览，为了更容易处理大型项目，并获得更好的开发环境，我们现在将切换到在 SFC，或 *.vue 文件中编写我们的 Vue 代码。
所有 *.vue 文件只包含三个部分
<template>包含 HTML 内容。<script>包含我们的 Vue 代码。<style>包含 CSS 样式。
但在我们可以在项目中开始使用 *.vue 文件之前，我们需要以不同的方式设置我们的计算机。本教程的下一页将解释这一点。
