본문 바로가기
반응형

program/Vue5

Vuetify 2.x 버전으로 레이아웃 잡기 #2070 Vutify 2.x 레이아웃 지난번에 Vuetify 프로젝트 이후로는 아마 하지 않으리라 예측했었는데.. 두 번째 Vuetify 프로젝트를 진행하고 있습니다. 지난번에는 1.x 였는데 2.x대로 업그레이드가 되었네요. 일단 기본적인 레이아웃을 구성하는 방법이 바뀌었습니다. 이번 포스팅에서는 기본적인 내용을 포함해서 다음 내용을 정리해 보려 합니다. 기본 블록 Button Group, Align Expansion Panel 기본 블록 1.x대에서는 다음과 같은 형식으로 블록을 지정해주었습니다. 이것이 2.x로 올라가면서 바뀌었습니다. 우선 좌우로 정렬시킬 경우입니다. See the Pen Vuetify layout 01 by minamiland (@minamiland) on CodePen. 다음.. 2020. 9. 26.
vuetify theme color 설정 Bootstarp도 그렇고, Vuetify도 그렇고 프레임워크들에는 기본적으로 사이트에서 쉽게 적용가능한 컬러테마가 몇가지 지정되어 있습니다. Vuetify는 plugins > vuetify.js 파일에서 그 값을 지정해 둘 수 있습니다. 기본적으로 인스톨을 마친 초기에는 아마도 다음과 같은 형식으로 되어 있을 것이라 생각됩니다. Vuetify 에서 제공하는 방법 이 상태에서 CSS를 경로를 새롭게 지정해주고, theme에서 필요로 하는 컬러값을 셋팅해 주면 사용가능한 상태가 됩니다. 이 방법은 개인적으로 SCSS파일 사용을 전제로 했었기에 택한 방법인 만큼 다른 방법도 있을 것이라 생각됩니다. 이 방법은 js파일에서 색상값만 바꾸면 자동으로 vuetify.scss에 적용되어 있는 기본 컬러값을 덮어씌우.. 2018. 11. 7.
Vue.js에서 CSS module 사용하기 그저 module 을 사용하면서 알게 된 내용에 관한 메모입니다. 우선 module을 사용하기 위해선 vue-loader를 사용하여야 합니다. vue-loader를 사용하게 되면 css 이외에도 scss와 같은 다양한 방식이 적용가능해집니다. 공식 문서는 본가 사이트에서 확인 가능합니다. 우선 vue에서 CSS를 사용할 경우는 그대로 사용하면 되지만, SASS/SCSS를 사용할 경우에는 lang="scss" 를 추가 시켜주어야 합니다. 이렇게 두가지를 적용시켜 적용시킬 수도 있습니다. 최종적으로, 예를 들어 Example.vue 라는 파일에서 module을 사용한 방식의 파일은 렌더링이 끝난 소스의 class를 확인하면 다음과 같아집니다. Vue 파일명 + module 클래스 + 랜덤문자의 조합으로 만들.. 2018. 10. 21.
vuetify grid layout 들여다보기 아래 내용은 버전 1.x대의 내용입니다. 2.x대에서 기본 레이아웃을 잡는 규칙이 변경되었습니다. 기본적인 레이아웃을 참고하실 경우 다음 글을 참고하시면 좋으실지도 모르겠습니다. - 2020/09/26 - [IT/program] - Vuetify 2.x 버전으로 레이아웃 잡기 프레임워크를 그리 좋아하지 않는 저로서는 아마 프로젝트가 끝나고 나면 Vuetify를 사용할 일은 두번다시 없지 않을까 생각하면서도.. 메모는 해두어야 겠다는 생각이 들어서.. 대부분의 웹프레임워크가 그렇듯이 Vuetify역시 기본적으로 반응형웹을 고려하여 만들어져 있으며, 일반적으로 사용되는 12단 형식을 사용하고 있습니다. Vuetify에서 제공하는 반응형 웹의 기본적인 내용은 'https://vuetifyjs.com/ko/la.. 2018. 10. 13.
vue 설치부터 vuetify 설치까지 우선은 vue Install 부터. 설치 자체는 무척 간단하게 되어 있습니다만. Yarn 이나 npm 으로 설치를 진행 하려면 우선적으로 node 가 깔려 있을 필요가 있습니다. 가장 손쉽게 접근하는 방법은 CDN을 활용하는 방법입니다. 연습만 하는 것이라면 jsfiddle이나 codepen 에서도 연습이 가능합니다. CDN을 사용하면 사용해 보는데는 문제가 없지만, 전 프로젝트에 사용해야 하는 관계로 설치버전으로 진행했습니다. 어디에서라도 참조하여 프로젝트를 생성시킬 수 있도록 '-g' 옵션을 활용합니다. npm install -g @vue/cli 설치 후에는 제대로 깔렸는지, 버전 확인을 해준뒤 프로젝트를 생성합니다. vue -V vue create [project-name] 하나하나 코드를 치기가 .. 2018. 8. 21.
반응형