「这是我参与11月更文挑战的第22天，活动详情查看：2021最后一次更文挑战」
1. Webpack 中对 SFC 文件的处理
前面我们在 src/main.js 文件中，把想要展示的内容直接通过字符串的格式传给了 template 选项：
...
const app = createApp({
template: '<h2>我是 Vue 渲染出来的</h2>', // 直接以字符串格式传递模板内容
...
});
app.mount('#app');
但是，如果所有模板内容都通过字符串形式直接传给 template 选项肯定不可取。
因此，我们可以把模板内容抽离出来，然后再做绑定，比如将模板内容抽取到 public/index.html 这一模板文件中，同时还可以添加使用了 data 中数据的代码：
<!DOCTYPE html>
<html lang="">
<head>
...
</head>
<body>
...
<div id="app"></div>
<!-- src/main.js 中绑定的模板内容 -->
<template id="my-app">
<h2>我是 Vue 渲染出来的</h2>
<h2>{{ title }}</h2>
</template>
<!-- built files will be auto injected -->
</body>
</html>
同时修改 src/main.js 文件中的代码：
...
const app = createApp({
template: '#my-app', // 通过元素的 id 绑定相应的模板内容
...
});
app.mount('#app');
修改完后，我们再来打包看下效果：
可以看到，页面中也能成功显示相应的内容。
但是，这种把模板内容抽离出来，然后再做绑定的方式有一个弊端：Vue 的代码的编写（这里是在 main.js 中）和 template 内容的编写（这里是在 index.html 中）是分开的，它们不在同一个文件中，这就意味着我们编写代码时势必要在这两个文件之间来回切换，而且，真实开发中组件会有很多，直接在 index.html 中写一大堆的 template 肯定也不现实。
所以，我们希望把组件的模板、数据（以及其它逻辑代码）甚至样式相关的代码都放在一个文件中来编写。那 Vue 有没有给我们提供这样一种文件呢？有，这个文件就是 SFC（Single File Components，单文件组件，也就是 .vue 文件）文件。我们的模板、逻辑和样式代码都可以在这个 SFC 文件中进行编写。
在编写这个 SFC 文件（.vue 文件）之前，我们先来讲下如何在我们使用的 VS Code 编辑器中对 SFC 文件做支持。
1.1 VS Code 对 SFC 文件的支持
默认情况下，VS Code 编辑器是不认识 SFC 文件（.vue 文件）的，因此在 .vue 文件中的代码是没有高亮显示的，也没有很好的提示等功能。
为了对 SFC 文件做较好的支持，我们在 VS Code 中可以选择使用两个扩展来获得对 SFC 文件的支持：
Vetur：从Vue2开发开始就一直在使用的支持Vue的VS Code的插件，但它对Vue3的支持不太好（比如当我们在一个根下写多个元素时它会报错等等）；Volar：目前官方推荐（尤雨溪亲推）的插件（后续会基于Volar开发官方的VS Code插件），对Vue3和TypeScript的支持更好；
我们这里选择安装并启用 Volar 插件：
