Vue First SFC Page
To start from scratch and develop our first SFC webpage, we will:
- Make a fresh, tidy Vue project.
- In the ‘App.vue’ file, write code
- Observe how the website automatically updates while it is being developed.
- Create the production page.
Create a Clean Project
To construct our own straightforward Vue web page, we will now delete every piece of content from the example project we created on the previous page.
Remove all material from inside the <template>, <script>, and <style> tags, as well as any properties like ‘setup’ and ‘scoped’, before we begin writing code.
This is how your ‘App.vue’ file should now appear:
App.vue:
<script></script>
<template></template>
<style></style>
Inside the’src’ folder, also delete the ‘assets’ and ‘components’ files.
To make’main.js’ appear like this, remove the line inside the file where assets are imported.
main.js:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
As of right moment, our project is blank.
Write code in 'App.vue'
Now that the project is tidy, include a header such as this one inside the <template> tag:
<template>
<h1>Hello World!</h1>
</template>
<script></script>
<style></style>
Save the ‘App.vue’ file, then use the terminal to navigate to your browser by clicking the localhost link. Have you seen the outcome? Now, you shouldn’t need to manually refresh the browser each time you save a modification in VS Code—the browser should update automatically.
Let’s now see a rather larger Vue example:
Example
App.vue:
<template>
<h1>{{ message }}</h1>
</template>
<script>
export default {
data() {
return {
message: 'This is some text'
};
}
};
</script>
<style></style>
Note: In the aforementioned example, export default enables’main.js’ to import App from ‘./App.vue’ and capture the data, allowing it to be mounted on the <div id=”app”> element within ‘index.html’.
