javascript - How vue.js file app.vue is called

Question

I am new to vue.js. I only know that main.js is the entry file and app.vue is the total component. Why do I remove the export default code in app.vue and import app from '.app' in main.js? Page But it can display the content in app.vue

App.vue configuration

<template>
  <p id="app">
    <p class='header'>
      I am header!
    </p>
    <p class='tab'>
      I am tab
    </p>
    <p class='content'>
      I am content
    </p>
  </p>
</template>

<script> 
</script>

<style>
</style>

main.js file

import Vue from 'vue';
import App from './App';

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
});

Can the app.vue file be received without exportmain.js?

Answer 1

Is there no error reported in the terminal?

Answer 2

There is nothing wrong with this. Vue does not stipulate that you must use export default. If you want to know the reason, build the example you wrote and look at the code in the generated app.js to know what is going on

Answer 3

The role of vue-loader

https://vue-loader.vuejs.org/...

<template>
Default language: html.
Each .vue file can contain at most one <template> block
The content will be extracted as a string, which will be compiled and used as the template option for the Vue component.

Without export, it is equivalent to a component with only template option

Vue.component('my-component', {
  template: '<span>only template</span>'
})