javascript - vue.js文件app.vue是如何调用的

Question

初学vue.js，只知道main.js是入口文件，app.vue是总组件，为什么我把app.vue中的export default代码去掉，main.js中import app from '.app'，页面却可以显示app.vue中的内容

app.vue的配置

<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文件

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

Vue.config.productionTip = false;

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

app.vue文件不需要exportmain.js也能接收到吗

Answer 1

难道终端那里没报错吗

Answer 2

这没毛病啊，vue并没有规定必须使用export default，如果你想要知道原因，build一下你写的这个例子，看看生成的app.js里面的代码就知道是怎么回事了

Answer 3

vue-loader 的作用

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

<template>
默认语言：html。
每个 .vue 文件最多包含一个 <template> 块
内容将被提取为字符串，将编译并用作 Vue 组件的 template 选项。

没有 export 就相当于一个只有 template 选项的组件

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