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>
  <div id="app">
    <div class='header'>
      I am header!
    </div>
    <div class='tab'>
      I am tab
    </div>
    <div class='content'>
      I am content
    </div>
  </div>
</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>'
})

Answer 4

这个叫单文件组件。

原理就是 Webpack 的插件 vue-loader会把 .vue 文件中的 template编译/翻译组件成 render 函数，并把script 和 style 中的内容一起打包。你在.vue文件中看到的script中内容并不是最终运行的Javascript。