퍼블리싱 된 파일을 vue프로젝트로 어떻게 옮겨야 할까요?
2037
작성한 질문수 1
안녕하세요. 현재 회사에 재직중인 주니어 개발자입니다. 현재 회사에서 새로운 프로젝트를 개발하게 되었는데 공교롭게도 개발자가 저와 시니어분 밖에 안계시고 시니어분은 저한테 프로젝트를 일임하신 상태신데(시니어분도 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.css가 vue-material-dashboard 해당 소스를 고려하지 않은 스타일이라면 충돌나겠죠?
npm init vue@3.1.9
0
44
2
크롭 웹스토어 vue devtools 설치 관련
0
43
1
snippets 작성하는 부분 설명이 있었나요?
0
51
2
computed 의 set 함수를 통해 const 변수에 값을 담는 부분
0
59
2
소스 공유 어디서 해야하는지 궁금합니다
0
62
2
component 등록과 사용
0
61
2
강의교안
0
58
2
eslint 룰 관련 질문이 있습니다.
0
70
2
npm init -y 명령어 실행에 관한 질문
1
157
2
volar 가 마켓플레이스에 검색되지 않아 vue(official)을 설치했습니다.
1
172
2
깊은 감시자 질문
0
91
2
정리된 내용
0
158
2
화면이 왜 이렇게 뜨는걸까요?
0
188
2
왜 다르게 뜰까요..?ㅠㅠ
0
159
2
npm init vue , npm create vue@latest 명령 오류
0
295
2
강의를 듣다보니 궁금한 점 질문드립니다.
0
144
2
watch강의 질문
0
155
1
강의 듣다가 질문드립니다.
0
122
1
이벤트 처리 부분 강의 실습
0
141
2
v-pre는 설명이 없나요?
0
156
2
AppCard.vue 만들다 말고 오류가 갑자기 엄청 뜹니다
0
147
1
개발자도구 Vue 탭 관련 문의
0
244
2
강의를 인텔리제이로 수업따라가도 되져?
0
180
2
API 사용시 자동으로 import하는 기능은 어떤것을 설치해야 하나요?
3
285
2