如何在Vuejs 2中导入组件

Question

我真的很困惑于导入VueJs组件。

我正在使用Vuejs2.2.4，我需要导入一个Vuejs组件。这是我的app.js

Vue.component('Test', require('./Test.vue'));

const app = new Vue({
    el: '#vue-app',
});

假设app.js位于MyProject/js/app.js中

下面是我的组件SimpleCompnent.vue：

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Simple Component</div>
                    <div class="panel-body">
                        I'm an Simple component!
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Simple Component mounted.')
        }
    }
</script>

假设SimpleCompnent.vue位于MyProject/js/SimpleCompnent.vue中

似乎Vue无法加载组件！它在浏览器控制台中抛出此错误：

Uncaught ReferenceError: require is not defined

Answer 1

实际上，如果没有适当的支持，require就不能在浏览器上下文中使用，因此您有两个选项：

• 在应用程序中创建(或修复)对require.js的支持(参见这里)。作为第一步，确保您有一个获取require.js的脚本标记，并有一个指向应用程序入口点的data-main属性。
• 为客户端使用CommonJS实现，比如webpack或褐化，这样require就可以自然地用客户端代码编写。
• 使用另一个模块系统实现，例如在system.js或ES2015之上。

无论哪种方式，如果您选择使用import的实现(即ES2015模块系统)，您可能希望使用向下编译代码的播音器 --将代码编译到浏览器支持的语言级别(避免那些令人讨厌的Unexpected token import错误)。

Answer 2

尝试：

import Test from './Test.vue'

您可以看到它的一个例子，这里。