我们的第一个 SFC 网页
要从头开始创建我们的第一个 SFC 网页，我们将
- 创建一个新的干净的 Vue 项目
- 在 'App.vue' 文件中编写代码
- 查看开发过程中网页如何自动更新
- 构建页面以供生产使用
创建一个干净的项目
现在我们将删除上一页中创建的示例项目中的所有内容，以便在 Vue 中创建我们自己的简单网页。
在我们开始编写代码之前，请删除 <template>、<script> 和 <style> 标签内的所有内容，并删除 'setup' 或 'scoped' 等任何属性。
您的 'App.vue' 文件现在看起来应该像这样
App.vue
<script></script>
<template></template>
<style></style>同时删除 'src' 文件夹内的 'assets' 和 'components' 文件夹。
删除 'main.js' 文件中导入资源的行，使 'main.js' 看起来像这样
main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')现在我们有了一个空的可用项目。
在 'App.vue' 中编写代码
现在我们有了一个干净的项目，在 <template> 标签内添加一个标题，如下所示
<template>
<h1>Hello World!</h1>
</template>
<script></script>
<style></style>保存 'App.vue' 文件，通过终端中的 localhost 链接在浏览器中查看。您看到结果了吗？每次在 VS Code 中保存更改时，浏览器都应该自动更新，而无需手动刷新浏览器。
现在让我们来看一个稍大一些的 Vue 示例
示例
App.vue:
<template>
<h1>{{ message }}</h1>
</template>
<script>
export default {
data() {
return {
message: 'This is some text'
};
}
};
</script>
<style></style>注意： 在上面的示例中，export default 使 'main.js' 能够使用 import App from './App.vue' 来捕获数据，以便它可以挂载到 'index.html' 中的 <div id="app"> 标签。
