컴포넌트 질문이 있습니다 ㅎㅎ

안녕하세요.

현재 어느정도 진행이 되어진 파이썬 + 장고 프로젝트에적용하려 합니다. 

장고 프레임워크라서 .vue 파일을 이용한 순수 뷰 프로젝트 구조를 사용을 못하고 있습니다. (혹은 방법을 아직 모르겠네요) 그래서 현재 .js 파일로 vue를 작성 중에 있는데요. 

기존 완성된 하나의 웹 페이지인 HTML 파일에 html 코드로 작성된 header, body, footer들을 vue 컴포넌트 별로 분류를 하려 합니다.

그래서 최상위(?) 뷰 인스턴스 하나에 components 들을 각각 app-header, app-content, app-footer 들로 등록을 해주려는데요.

.js 파일에 각 component를 선언한 객체에 template에다가 그 긴 HTML 코드들을 javscript 언어로 작성해서 제어해 주는 방법 밖에 없을까요~? 

ex) 

let appHeader = {

 template: '<div id="header">header</div>',

 props: ['propsdata']

};

let appFooter = {

 template: '<div id="footer">footer</div>'

 props: ['propsdata']

};

let app = new Vue({

 el: '#app',

 components: {

   'app-header': appHeader,

   'app-footer': appFooter

 }

});

위 예시에 appHeader, appFooter 의 template 는 짧지만 현재 제 프로젝트에는

HTML 코드로 작성된 header와 footer 는 이미 수 많은

element 들로 작성된 코드가 있는데요.  그걸 .js 파일안에 있는 appHeader, appFooter 객체에 있는 template 에다가 javascript 코드로 적는 방법 밖에 없는지 해서요.. 

혹시나 다른 방법이 없을까요!?