Question

我真的很担心导入VueJs组件。

我正在使用Vuejs 2.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

尝试：

import Test from './Test.vue'

您可以看到它的示例here。

Answer 2

实际上，如果没有适当的支持，require不能在浏览器上下文中使用，所以你有两个选择：

在您的应用中创建（或修复）对require.js的支持（请参阅here的方式）。作为第一步，请确保您有一个脚本标记，该标记可以获取require.js，并且具有指向您应用的入口点的data-main属性。
为客户端使用CommonJS实现，例如webpack或browserify，因此require可以在客户端代码中自然编写。
使用另一个模块系统实现，例如在system.js或ES2015之上。

无论哪种方式，如果您选择使用import的实现（即ES2015模块系统），您可能希望使用a transpiler将代码下编译为浏览器支持的语言级别（避免那些讨厌的Unexpected token import错误。）

如何在Vuejs 2中导入组件

2 个答案: