我们第一个 SFC 网页

为了从头开始创建我们的第一个 SFC 网页，我们将：

• 创建一个新的 Vue 项目
• 在 'App.vue' 文件中编写代码
• 查看网页如何在开发过程中自动更新
• 为生产构建页面

创建一个干净的项目

现在，我们将删除上一页中的实例项目中的所有内容，以在 Vue 中创建我们自己的简单网页。

在我们开始编写代码之前，请删除 <template>、<script> 和 <style> 标记中的所有内容，并删除任何属性，如 'setup' 或 'scoped'。

您的 'App.vue' 文件现在应该如下所示：

<script></script>
<template></template>
<style></style>

同时删除 "src" 文件夹中的文件夹 "assets" 和 "components"。

删除 'main.js' 文件中导入 assets 的内容，使 '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 链接转到浏览器。然后就可以看到结果了。

现在我们来看一个稍大的 Vue 实例：

<template>
  <h1>{{ message }}</h1>
</template>
<script>
export default {
  data() {
    return {
      message: 'This is some text'
    };
  }
};
</script>
<style></style>