如何導入Vuejs中的組件2

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

來源

2017-03-19 Hamed Kamrava

事實上，require不能在沒有適當支持的瀏覽器環境中使用，所以你有兩個選擇：在您的應用程序require.js

創建（或修復）支持（見如何here）。作爲第一步，請確保您有一個腳本標記，用於獲取require.js並具有指向您的應用程序入口點的data-main屬性。
對客戶端使用CommonJS實現，如webpack或browserify，因此require可以自然地寫在客戶端代碼中。
使用另一個模塊系統實現，例如，在system.js或ES2015之上。

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

來源

2017-03-19 10:14:48

你是完全正確的！謝謝 –

嘗試：

import Test from './Test.vue'

你可以看到它here一個例子。

來源

2017-03-19 10:14:32 Saurabh

'未捕獲的SyntaxError：意外的令牌導入' –

@HamedKamrava您可能需要babel，檢查[this]（http://stackoverflow.com/q/33440405/1610034），您還可以檢查[vue-hackernews -2.0]（https://github.com/vuejs/vue-hackernews-2.0/）作爲vue項目。 – Saurabh

Link down ... :( – jdstaerk

如何導入Vuejs中的組件2

回答

相關問題