What does the app.vue file do?

app.vue is the first add-in for vue page resources, the main component, and the page entry file. All pages are switched under App.vue; app.vue is responsible for building definitions and page component collection. . The role of the app.vue file: 1. Generally refers to the root component of the entire vue project, used to display the content in the component; 2. App.vue is called the root component for the entire project, and the sub-elements under the template are for the current vue The instance is called the root component.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

What is app.vue? What is the use?

app.vue is the first add-in for vue page resources. It is the main component and page entry file. All pages are switched under App.vue; it is also the key to the entire project. , app.vue is responsible for building definitions and gathering page components.

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: &#39;App&#39;
}
</script>

<style>
#app {
  font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 160px;
  .img{
     200px;
  }
}
</style>

app.vue can not only be used as the homepage of the website, but can also write animations or styles that are commonly needed in all pages. It’s okay not to write code on it.

app.vue is the main component, the page entry file, and the first add-in for vue page resources. All pages are switched in app.vue. It can be understood that all routes are subcomponents of app.vue.

The role of app.vue

1. The App.vue file generally refers to the root component of the entire vue project and is used to display the content in the component.

2. App.vue is called the root component for the entire project, and the sub-elements under the template are called root components for the current vue instance.

The relationship between main.js, App.vue, index.html

In the initialized Vue project, we are the first to contact What we have arrived are the three files main.js, App.vue, and index.html. We can learn from the training videos or official documents:

index .html---Home page, project entry

App.vue---Root component

main.js---Entry file

So what is the connection between these files?

1. First look at the content in index.html: (In order to identify each file well, I have text-marked each file)

2. In App.vue, I did the following:

3. In main.js, the initial content of the file is as shown below:

So what about the webpage we check in on?

The effect of the web page is as follows:

That is to say, in the Title part of the web page, the Title defined in index.html is loaded, and in the text part, Loaded the sections defined in App.vue. (But it should be noted that when the browser is opened, the text part in the browser will instantly display the text part defined in index.html)

Then, we can analyze The above logic is clear. When a browser accesses a project, the first thing it accesses is the index.html file,

and in index.html there is a

<div id="app">来自index.html正文中的内容</div>

The id is the mount point of the app, and then our Vue root instance will be mounted on the mount point;

main.js is the entry file of the project. In main.js, create a new Create a Vue instance. In the Vue instance, tell the instance where to mount it through

new Vue({  el: '#app',
  //components: {App },
  //template: '578d07aa9e36ca6b43806c9706879c6d'
})

; (that is, the location where the instance is loaded into index.html )

Next, a local component App is registered in the instance. Where does this local component App come from?

import App from './App.vue'new Vue({
  //el: '#app',  components: {App },
  //template: '578d07aa9e36ca6b43806c9706879c6d'
})

This local component is App.vue in the current directory;

What is the template? The template is the content in the template in the component App.vue. (The template will replace the content at the original mount point)

So the instance of Vue is the content of the App.vue component of the warrior.

So, let’s summarize: When the project is running, main.js is used as the entry file of the project. During operation, find the location where its instance needs to be mounted, that is, in index.html. At the beginning, index.html The content at the mount point will be displayed, but then it will be replaced by the content in the template in the component in the instance, so we will see that the content of the main text in index.html will be displayed for a moment.

The Title part in index.html will not be replaced, so it will always be retained.

[Related recommendations: vuejs video tutorial, web front-end development]

The above is the detailed content of What does the app.vue file do?. For more information, please follow other related articles on the PHP Chinese website!