webpack - 使用 Webpack 导入 Vue 组件

Question

我有一个带有 Webpack 的 hello world Vue 应用程序设置，并且初始 App 组件可以正常工作并安装到 body 上。尽管在该 App 组件中我无法弄清楚如何使用我制作的更多组件。

main.js

import Vue from 'vue'
import App from './app.vue'
    
new Vue({ 
  el: 'body',
  components: { App }
})

app.vue

<template>
  <div class="message">{{ message }}</div>
</template>

<script>
  export default {
    data () {
      return {
        message: 'Hello World'
      }
    }
  }
</script>

我试过了

import TopBar from './top-bar.vue'

然后在 main.js 和 app.vue 的脚本部分尝试使用

<top-bar></top-bar>

没有运气。

我想我错过了如何正确注册组件，例如在它所做的 Vue 文档中:

Vue.component('top-bar', TopBar)

但我认为在将 webpack 与 vue-loader 结合使用时，我需要做一些不同的事情。

Answer 1

你可以像你展示的那样全局注册它，或者如果你想在本地注册它以便在单个组件中使用，你需要将它添加到 Vue 实例的 components 对象中:

<template>
  <top-bar></top-bar>
  <div class="message">{{ message }}</div>
</template>

<script>
import TopBar from './top-bar.vue'

export default {
  components: {
    TopBar
  },
  data () {
    return {
      message: 'Hello World'
    }
  }
}
</script>