인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

안피소님의 프로필 이미지
안피소

작성한 질문수

Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"

개발환경 구성

퍼블리싱 된 파일을 vue프로젝트로 어떻게 옮겨야 할까요?

작성

·

1.8K

·

수정됨

0

안녕하세요. 현재 회사에 재직중인 주니어 개발자입니다. 현재 회사에서 새로운 프로젝트를 개발하게 되었는데 공교롭게도 개발자가 저와 시니어분 밖에 안계시고 시니어분은 저한테 프로젝트를 일임하신 상태신데(시니어분도 vue는 해본 적이 없으십니다.), 프론트엔드단을 vue로 처음 개발하게 되어서 아무래도 혼자서 인터넷을 찾아보는것 보다는 강의를 듣는게 낫겠다 싶어 수강신청 하고 질문드립니다.

현재 퍼블리싱 된 파일들이 있는 상태이고, 이것을 vue프로젝트로 옮겨야 되는 상황입니다.

일단 css파일과 js파일은 public디렉토리 안에 css디렉토리와 js디렉토리를 만들고 그 안에 파일을 넣은 다음 index.html에 link태그와 script태그로 적용시키고 그 외 html파일에 있는 태그는 페이지별로 vue파일을 만들어서 그 안에 넣어놨습니다. 그런데 이렇게 하니 html과는 다르게 제대로 작동되지 않더군요. 혹시 이렇게 하는게 아닌 따로 적용하는 방법이 있는것인지, 아니면 방법 자체는 맞지만 어딘가 다른곳에서 엇나간것인지 궁금합니다.

(참고로 대시보드 페이지를 작성하게 되어서 구글링 해서 찾아본 creative-tim에서 출시한 vue-material-dashboard에서 그래프가 필요하여 해당 vue컴포넌트와 그에 필요한 scss파일을 src-assets에 설치해뒀습니다. 혹시 scss와 적용되었던 css파일이 충돌이 나서 제대로 안되는것인지도 궁금합니다.
https://www.creative-tim.com/product/vue-material-dashboard-2 참고사항으로 위에서 말한 creative-tim의 뷰프로젝트입니다.)

 

답변 1

0

짐코딩님의 프로필 이미지
짐코딩
지식공유자

안녕하세요 :)

우선 html/css로 마크업 된 퍼블리싱을 Vue로 옮기기 위해서는 "옮긴다"라는 의미 보단 해당 디자인에 맞게 컴포넌트 하나하나 만들면서 가져야 될 것 같아요.

예를들면 레이아웃 컴포넌트 -> 공통 컴포넌트 -> 페이지 컴포넌트 제가 해당 퍼블리싱을 볼 수 없지만 아마도 html/css로 이루어진 결과물 이라면 Vue 특성에 맞게 컴포넌트 하나하나 설계 및 개발을 진행 하셔야 할거에요~!


(... 혹시 scss와 적용되었던 css파일이 충돌이 나서 제대로 안되는것인지도 궁금...)

해당 출동은 디버깅을 해봐야 알겠지만 기존에 작성된 소스(vue-material-dashboard)custom.css를 적용했다면 해당 custom.cssvue-material-dashboard 해당 소스를 고려하지 않은 스타일이라면 충돌나겠죠?

 

 

안피소님의 프로필 이미지
안피소

작성한 질문수

질문하기