Vue.js 싱글 파일 컴포넌트(Single File Components) webpack 빌드 없이 사용하기

python django를 사용해서 간단한 사이드 프로젝트를 만들어 보고 있습니다. 프론트엔드는 장고 템플릿에 데이터 바인딩을 위해 간단히 vue.js 를 적용해서 쓰고 있습니다.

데이터 바인딩만 해도 vue.js를 사용하지 않았을 때와 비교하면 엄청나게 큰 작업효율 향상이 있지만, vue.js의 큰 장점인 컴포넌트도 활용하고 싶었습니다. 실제 프로젝트에서는 싱글 파일 컴포넌트(.vue 파일)를 사용해서 컴포넌트를 만들어 사용하는데, 웹팩 빌드가 필요하기 때문에, 현재 사이드 프로젝트에서는 번거롭다고 생각해서 사용을 못 하고 있었습니다.

• 참고
  • 싱글 파일 컴포넌트

하지만 역시 어느 선구자께서 웹팩 빌드 없이 싱글 파일 컴퍼넌트를 사용 할 수 있는 라이브러리를 이미 만들어 놓으셨고, 간단히 소개해 드리도록 하겠습니다.

• 참고
  • Using Vue.js Single File Component Without Module Bundlers
  • http-vue-loader

자세한 내용은 위의 두 페이지를 보시면 쉽게 아실 수 있습니다.

간단히 얘기하면
<script src="https://unpkg.com/http-vue-loader"></script> 라이브러리를 load 하고 기존 .vue 파일을 똑같이 사용하면 됩니다. 현재 코드에 적용해서 쓰고 있는데 문제 없이 잘 돌아가네요!