使用 Webpack 导入 Vue 组件

Posted 2023-02-22

【中文标题】使用 Webpack 导入 Vue 组件

【英文标题】：Importing Vue Components with Webpack

【发布时间】：2016-05-26 19:29:15

【问题描述】：

我使用 Webpack 设置了一个 hello world Vue 应用程序，并且初始应用程序组件正常工作并安装到正文。虽然在那个 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)

但我认为当使用带有 vue-loader 的 webpack 时，我需要做一些不同的事情。

【参考方案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>

【参考方案2】：

你可以在组件对象中给它一个合适的名字，如下所示

<template>
  <nav-bar></nav-bar>
</template>

<script>
import TopBar from './TopBar.vue'

export default 
  components: 
    'nav-bar': TopBar
  

</script>