내맘대로 Study/Vuetify 4

[vuetify] backend 처리를 위한 express 설치

개요 vue로 작성한 front end를 처리 하기위한 backend framework 설치 합니다. Express 설치 npm이 설치 되어 있다는 가정하에 진행 합니다. 1. express를 전역으로 설치 합니다. npm install express-generator -g 2. express를 시용하여 backend application을 생성합니다. - template engine으로 pug를 사용합니다. express --view=pug backend 3. audit 오류 해결 - express설치하면 audit을 해결 하라고 아래 처럼 뜹니다. 저는 찜찜한것이 싫어서 아래 명령을 여러번 반복하여 0 critical로 만들었습니다. npm audit fix --force 3. express 실행 1..

[vuetify] router로 화면 전환

본 포스트는 [vuetify] Sample Wireframe적용 를 진행 했다는 가정하에 진행 합니다. router 설치 1. 설치 VScode terminal에서 실행 npm install --save vue-router 2. vue-router가 설치 안되어 있을시 에러 ERROR Failed to compile with 1 errors 11:18:26 ├F10: PM┤ This dependency was not found: * vue-router in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_..

[vuetify] Sample Wireframe적용

Sample Wireframe 선택 vuetify에서 제공하는 무료를 아래 링크에서 확인 가능 합니다. vuetifyjs.com/en/getting-started/wireframes/ 여기서 맘에 드는 것을 하나 선택 합니다. 저는 Constrained 를 선택 했습니다. Constrained 적용 1. 소스 코드 찾기 위에서 선택한 Constrained를 누르면 다음과 같은 화면이 뜨게 됩니다. 소스코드를 보기 위해서 우측 하단에 고양이(Octocat) 표시를 누르면 github의 Contrained 소스 코드를 볼수 있습니다. 2. 소스 코드 복사 소스 코드를 모두 복사합니다. 쉽게 복사 하기위해서 Raw를 누르시면 깔끔하게 소스 코드를 보실 수 있습니다. 3. 소스 코드 적용 복사된 소스코드를 vu..

[vuetify] 설치 및 vuetify 환경 세팅

Brower 지원 확인 vuetifyjs.com/en/getting-started/browser-support/ Browser support Vuetify is a progressive framework that supports all evergreen browsers and IE11 / Safari with polyfill. vuetifyjs.com 설치 / 삭제 설치를 위해서 필요한 것 Vue CLI 1. 설치 - 아래 두 명령어중 하나로 설치 npm install -g @vue/cli yarn global add @vue/cli 2. 설치 완료 3. 확인 1) vue 명령으로 버전 확인 - vue -v 2) npm 설치 리스트 확인 - npm list -g --depth=0 4. vue-clie 삭..