如何在 Vuejs 2 中导入组件

哈米德·卡姆拉瓦

我真的对导入 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

埃里兰·马尔卡

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

在您的应用程序中创建（或修复）对 require.js 的支持（请参阅此处的操作方法）。作为第一步，请确保您有一个获取 require.js 的脚本标签，并且有一个data-main指向应用程序入口点的属性。
使用CommonJS的实现客户端，像的WebPack或browserify，所以requireS能够自然地客户端代码编写。
使用另一个模块系统实现，例如在 system.js 或 ES2015 之上。