vue-cli里面main.js为什么能够import .vue文件

Question

//main.js文件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

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

即使我删掉了script部分,也能正常渲染,正常被main.js import,为什么呢?

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

//以下script内容删掉
<script>
import Hello from './components/Hello'

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

Answer 1

vue-cli 里使用了 vue-loader，vue-loader会将 *.vue 的文件转换成 CommonJS 模块，具体可以看 vue-loader 的文档 http://vue-loader.vuejs.org/e...

Answer 2

因为 webpack 做了预处理。它会使用 vue-loader 插件把 .vue 文件转成可以识别的模块。