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

问题描述

问 题

//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>

解决方案

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

这篇关于vue.js - vue-cli里面main.js为什么能够import .vue文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！