기존 프로젝트에서 vue-cli 적용

Question

현업에서 vue 적용시 *.vue 로 화면을 분리하여 관리하는 것이 일반적일것 같은데요.

vue만 사용하는 single app의 경우 vue creat 로 프로젝트를 생성하여 진행하면 되지만

기존 프로젝트의 경우 vue가 필요한 화면이 있을 때마다 vue creat를 하지는 않을것 같습니다.

기존 프로젝트의 특정 .jsp 같은 파일에 구성요소를 *.vue를 적용하여 사용하려면 어떻게 해야 하는지 알고 싶습니다.

정리하면

.jsp 파일에 appHeader.vue와 appContent.vue를 사용하여 페이지를 구성하고자 합니다.

Answer

안녕하세요 jyjo2님 좋은 질문 주셨네요. 뷰 CLI로 vue create 라는 명령어를 입력하는 이유는 최초에 프로젝트를 구성하기 위해서입니다. 보통 CLI로 생성을 하더라도 `.vue` 파일은 하나씩 직접 만드셔야 해요. 요 부분 유념해 주시면 좋을 것 같구요. JSP 기반에서 .vue 파일을 적용하시려면 웹팩의 vue-loader로 변환을 한번 해주셔야 할텐데 아마 시작하기 강좌만 보시고는 구성하시기가 좀 어려울 것 같습니다.

JSP에서 점진적으로 적용하시려면 .vue 파일이 아니라 CDN 방식으로 먼저 접근하시는 것을 추천하고 그래도 만약 .vue 파일로 코딩을 한 후 JSP에 넣어서 사용하시고 싶다면 프런트엔드 빌드 시스템에 대해서 이해를 하셔야 할 것 같습니다. 관련 문서는 먼저 아래 문서를 보시면 좋을 것 같아요 :)

https://joshua1988.github.io/webpack-guide/guide.html

Vue.js 학습 로드맵을 쭉 따라 가시고 나면 마지막에 아 이렇게 하면 되겠구나 라고 힌트를 얻으실 수 있을 듯 합니다. 또 궁금하신거 있으면 말씀해 주시구요. 수강해 주셔서 감사합니다 :)

jyjo2

기존 프로젝트에서 vue-cli 적용

이 글과 비슷한 Q&A

github 권한 요청합니다.

너비에 따라 row에서 column으로 바꾸는 방법

52강의 originalTpdp ref 와 todo ref

props로 함수를 전달했을 때의 질문입니다!