首页 文章

使用Webpack导入Vue组件

提问于
浏览 次
29

我在Webpack中设置了一个hello world Vue应用程序，并将初始的App组件工作并安装到正文 . 虽然在该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'

在app.vue的main.js和script部分中，然后尝试使用

<top-bar></top-bar>

没有运气 .

我想我错过了如何正确注册组件，例如在Vue文档中：

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

但我认为在使用webpack和vue-loader时我需要做一些不同的事情 .

webpack vue.js

2 回答

  • 40

    您可以像显示的那样全局注册它，或者如果要在本地注册它以在单个组件中使用，则需要将其添加到Vue实例的 components 对象：

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

<script>
    import TopBar from './top-bar.vue'
    export default {
        data () {
            return {
                message: 'Hello World'
            }
        },
        components: {
            TopBar
        }
    }
</script>
    回复于
  • 5

    您可以在组件对象中为其指定合适的名称，如下所示

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

<script>

    import TopBar from './TopBar.vue'

    export default {
        components: {
            'nav-bar': TopBar
        }
    }
</script>
    回复于

相关问题