Our First SFC Web Page

Create a Clean Project

Now we will remove all content in the example project we made on the previous page to create our own simple web page in Vue.

Before we start to write code, remove all content inside the <template>, <script> and <style> tags, and remove any attributes like 'setup' or 'scoped'.

Your 'App.vue' file should now look like this:

<script></script>

<template></template>

<style></style>

Also remove the folders 'assets' and 'components' inside the 'src' folder.

Remove the line where assets are imported inside the 'main.js' file so that 'main.js' looks like this:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

We now have an empty project to work with.

Write code in 'App.vue'

Now that we have a clean project, add a header inside the <template> tag, like this:

<template>
  <h1>Hello World!</h1>
</template>

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

Save the 'App.vue' file, go to your browser by following the localhost link in the terminal. Do you see the result? The browser should now update automatically every time you save a change in VS Code, without having to manually refresh the browser.

Now lets take a look at a slightly larger Vue example:

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

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

<style></style>

npm