我们的第一个 SFC 网页

创建一个干净的项目

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

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

你的 'App.vue' 文件现在应该像这样

<script></script>

<template></template>

<style></style>

还要删除 'src' 文件夹内的 'assets' 和 'components' 文件夹。

删除 '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 示例

<template>
  <h1>{{ message }}</h1>
</template>

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

<style></style>

npm