我们的第一个 SFC 网页

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

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

创建一个干净的项目

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

在我们开始编写代码之前，删除里面的所有内容<template>,<script>和<style>标签，并删除“设置”或“范围”等任何属性。

您的“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'以便它可以安装在<div id="app">'index.html' 内的标签。

码农教程 - 一技在手,衣食无忧!

我们的第一个 SFC 网页

创建一个干净的项目

在“App.vue”中编写代码

示例

Vue练习

通过练习测试一下

练习: