如何在 Vuejs 2 中导入组件答案

【问题标题】：How to import a component in Vuejs 2如何在 Vuejs 2 中导入组件
【发布时间】：2017-09-18 17:29:49
【问题描述】：

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

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

确实，require 在没有适当支持的情况下无法在浏览器上下文中使用，因此您有两个选择：

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

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

【讨论】：

【解决方案2】：

试试：

import Test from './Test.vue'

你可以看到它的一个例子here。

【讨论】：

Uncaught SyntaxError: Unexpected token import
@HamedKamrava 你可能需要babel，查看this，也可以查看vue-hackernews-2.0作为vue项目的设置。
链接下来... :(
@jdstaerk 已更新。
@Saurabh 你是我的英雄 :)