如何在Vuejs 2中導入組件

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'

您可以在此處查看示例。

Answer 2

確實，如果沒有適當的支持， require不能在瀏覽器上下文中使用，因此有兩種選擇：

• 在您的應用中創建（或修復）對require.js的支持（請參見此處 ）。 第一步，請確保您具有一個腳本標簽，該標簽可提取require.js並具有指向應用程序入口點的data-main屬性。

• 使用CommonJS的實現客戶端，像的WebPack或browserify ，因此require S能夠自然地客戶端代碼編寫。

• 使用另一個模塊系統實現，例如在system.js或ES2015之上。

無論哪種方式，如果您選擇使用一個實現import秒（即一個ES2015模塊系統），你可能需要使用一個transpiler下來，編譯代碼中對語言水平的瀏覽器支持（避免那些討厭的Unexpected token import錯誤）。