Component Structure and Child Components with Props
Learn about the component structure in Vue, including the usage of child components and props.
We'll cover the following...
Component structure
If we explore the files and directory structure that the Vue CLI has generated for our application, we will notice three top-level directories named node_modules, public, and src.
Outside of the node_modules directory, which contains the modules required to
generate the application, the public directory contains the index.html file, and all other Vue files are housed in the src directory. If we examine the src directory, we will notice a main.ts file with the following contents:
import { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')
Here, we can see that the main.ts file is importing the App class from the App.vue file and calling the createApp function with the App class as its only argument. It then calls the mount function with the string '#app', which tells Vue to mount the generated HTML from the App class to a DOM element with an id of app or <div id="app">, which can be found in the public/index.html file. Note that all Vue source files have the extension .vue.
The App.vue file contains our App component. Let’s modify the default App.vue file with the following content:
<template>Hello Vue !</template><script lang="ts">import { Vue } from 'vue-class-component';export default class App extends Vue {}</script><style scoped></style>
Here, we can see the main structure of a Vue ...