# vuetify

[Vue] Vue2 + Vuetify(2) + TypeScript
Vue2 버젼에 Vuetify와 TypeScript를 추가하려하는데 시작하자마자 에러가,,,

vue에 vuetify 추가
vue add vuetify 명령어를 통하여 vuetify 설치를 하면파일에 자동으로 vuetify structure이 구성됨\--- 여기까지 하면 기본 뷰티파이 템플렛이 나옴!---\---App.vue에 items 배열안에 title, to를 입력해준 후 link:t

vuetify 실행을 위한 vue
npm i vue-router을 설치 해야 router을 사용할 수 있다src 하위에 views 폴더를 만든 후 DDD.vue / GridSystem.vue 두개의 파일을 만들어 주고,src 하위에 router 폴더를 만든 후 index.js 파일을 만들어 준다pack

Vuetify 설정
vue cli 설치터미널에 vue create (원하는 프로젝트 명)vuetify-admin-template 명령어 프로젝트 생성vuecli 3.0 이상부터는 프로젝트 생성시 의존된 라이브러리도 함께 설치 완료됨=> 실행은 npm run serve

vuetify 란
Vue 기반 UI framework생산성, 일관성, 재사용성, 퀄리티Material Design을 기반으로 설계되었다고품질의 UX/UI 구축

npm 빌드시 CSS 우선순위가 Local 환경과 달라지는 이유 (feat.Vuetify...)
현재 진행중인 프로젝트에서는 Vuetify를 사용하고 있는데, Vuetify 컴포넌트의 디자인을 그대로 사용하기에는 한계가 있으므로 퍼블리싱 작업 단계에서 Vuetify 컴포넌트의 Style을 재정의해야 하는 경우가 다분하게 있다. 그런데 Local환경에서는 CSS가

Vue date-picker를 통한 캘린더 만들기
기존 프로젝트에서는 한 페이지 안에 모든 데이터를 넣다보니 무겁고, 유지보수할 때 찾는게 쉽지 않았다.그래서 신규 프로젝트때는 component화해서 잘 사용했으면 좋겠다는 생각이 들어서 시작되었다. 나의 지옥행이(?)프로젝트에서 페이지마다 형태가 다르기때문에 본인 페
[Vuejs] Vuetify 를 활용한 Lazy Loading 구현하기
고객 유입량 급증 에 따른 메인 화면 비정상 동작 (대외기관 response를 기다리면서 pending)메인 화면에서는 10개의 rest API를 비동기로 동시에 호출한다. (Was to Web Server)API 비동기 호출을 유지하면서 WAS 커넥션 부하를 방지할

[Vue] vuetify 바텀시트 커스텀css (너비조정)
vuetify 커스텀하기..fullscreen 이지만영역 너비를 조정해야 할 때...style에 추가하자너무 빡셌다.. 댕같은
[vuetify] dataTable 칼럼 숨기기
칼럼 객체에 align: ' d-non'이라고 하면 안보임근데 'd-non'이라고 하면 소용없음

CSS 프레임워크
CSS 전처리기는 우리(개발자)에겐 CSS보단 친화적이지만 브라우저가 해석하지 못하는 언어로 작성된 스크립트를 별도 플러그인과 프레임워크를 통해 우리가 아는 CSS로 변환하는데 사용한다. 기존 CSS의 단점인 유지보수의 불편함 등을 보완한다.Sass는 기본적으로 SAS

vue - lazy loading
예를들어 어떤 사이트를 접속하여 특정 화면의 기능이나 뷰만 확인하고자 접속하고자 했을 때..해당 사이트이 모든 리소르를 받아와 웹 페이지를 로딩하는것은 상당히 비효율 적이고 비교적 느린 브라우저 로딩에 사용자의 경험에 좋지 않은 인상을 줄 수 있다.Test.vue 컴포

vuetify - Multiple-Layouts2
기본 Index.vue를각각 Appbar, Drawer, view로 나눔로그인 / 회원가입상품리스트

vuetify - Multiple-Layouts
레이아웃 구조를 여러개로 만들려고 한다.기존 레이아웃 (앱바, 사이드바, 콘텐츠)은 default로 두고추가 레이아웃은authentication, page로authentication : SignIn.vue, SignUp.vue page : ProductList.vu

vuetify - custom-sass
https://vuetifyjs.com/en/features/sass-variables/https://vuetifyjs.com/en/api/vuetify/$hedings

vuetify - others
이미지 무료사이트https://pixabay.com/ko/https://vuetifyjs.com/en/components/data-tables/https://vuetifyjs.com/en/components/buttons/https:

vuetify - helper
https://vuetifyjs.com/en/styles/spacing/https://vuetifyjs.com/en/styles/display/