Vuejs 2에서 구성 요소를 가져 오는 방법

Question

VueJs 구성 요소를 가져 오는 것이 정말 혼란 스럽습니다.

Vuejs 2.2.4를 사용 중이며 Vuejs 구성 요소를 가져와야합니다. 여기 내 app.js입니다 :

<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.component('Test', require('./Test.vue')); 

const app = new Vue({ 
    el: '#vue-app', 
}); 

는 app.js이 MyProject/js/app.js

에 위치한 가정 그리고 나의 구성 요소 SimpleCompnent.vue입니다

Vue처럼 보이지만 구성 요소를로드 할 수 없습니다! 이 브라우저 콘솔에서이 오류가 발생합니다 :

Uncaught ReferenceError: require is not defined 

Answer 1

, require 적절한 지원하지 않는 브라우저 컨텍스트에서 사용할 수 없습니다, 그래서 당신은 옵션이 몇 가지 있습니다 : 앱에서 require.js에 대한

• 만들기 (또는 수정) 지원을 (어떻게 here 참조) . 첫 번째 단계에서는 require.js를 가져 오는 스크립트 태그가 있고 앱의 진입 점을 가리키는 data-main 속성이 있어야합니다.

• 클라이언트에 CommonJS 구현 (예 : webpack 또는 browserify)을 사용하면 require을 클라이언트 측 코드에 자연스럽게 쓸 수 있습니다.

• 다른 모듈 시스템 구현을 사용하십시오. system.js 또는 ES2015 상단에 있습니다. 당신이 import의 방법 (일반 ES2015 모듈 시스템)를 사용하여 구현을 선택한 경우

는

어느 쪽이든, 당신은 브라우저가 지원하는 언어 수준으로 코드를 컴파일합니다 a transpiler (그 불쾌한을 피하는을 사용할 수 있습니다 Unexpected token import 오류).

Answer 2

시도 :

import Test from './Test.vue' 

당신은 그것을 here의 예를 볼 수 있습니다. 실제로