import App from './App'; 的具体含义。

Question

在一个Vue项目中，
main.js:

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

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
});

App.vue:

<template>
  <div id="app-container">
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'app'
}
</script>

<style>

</style>

我想问下，在main.js中，import App from './App';到底是导入了什么？

是不是导入了整个App.vue（也就是说包括App.vue的：template, script, style）?

Answer 1

是的。可以看到引入之后是作为组件展示的：

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

也就是一个页面，对比 html ， template 是静态页面， style 是 css 样式， script 是逻辑代码，页面要完整自然不能引入不完整。

Answer 2

import App from './App'; 实际上是
import App from './App.vue';
注意只有在webpack下并且配置了vue-loader才能import vue格式的文件，详见文档

Answer 3

这个是ES6引入规范