티스토리 뷰

Language/Vue.js

[plume] css와 vue 분리

구일일구 2024. 6. 21. 14:55
반응형

https://ux.stories.pe.kr/256#google_vignette

 

Vue의 Vuetify로 대규모 프로젝트 SCSS(CSS) 진행하는 방법

안정성이 입증되었는지 요즘에는 Vue로 대규모 프로젝트를 많이 하는 추세인것 같습니다. 저도 대규모 프로젝트에 퍼블리셔로 참여하면서 얻은 경험을 기록 차원에서 포스팅을 해보려고 합니다

ux.stories.pe.kr


SCSS 폴더 구성

 

layout : 웹페이지 전체를 구성하는 레이아웃 css

view : 각각 개별 화면에 대한 css

templates : 여러개의 Components로 구현된 웹사이트에 특화된 템플릿

components: 버튼, 인풋박스 등의 개별 컴포넌트에 대한 css

_common.scss : 공통적으로 적용되는 CSS

_index.scss : 모든 SCSS를 한곳으로 모으는 CSS (variables.scss는 여기에 포함되지 않음)

_variables.scss : 변수에 대한 정의막 작성(이 파일은 vue.config.js에 적용)

 

 


* vuetify 사용

- css를 vue에서 분리시키기 위해

- vue3 - vue CLI 버전 다운로드

- 참고 :: https://jigeumblog.tistory.com/81

 

Vue] Vuetify 설치, 적용하기

Vuetify란? Vuetify란 구글의 material design을 사용할 수 있게 만든 Vue.js를 위한 UI 프레임워크입니다. Vuetify는 사용자가 원하는 컴포넌트를 사용할 수 있도록 다양하고 유용한 라이브러리를 제공합니

jigeumblog.tistory.com

 

반응형
댓글