로메오의 블로그

VUE.JS 목록 pinia 설치 확인 Quasar cli로 프로젝트 생성시 pinia 옵션을 추가했습니다. stores/counter-store.ts import { defineStore } from 'pinia' export const counterStore = defineStore('main', { state: () => ({ counter: 0, name: 'romeoh' }), getters: { doubleCount: state => { return state.counter * 2 } }, actions: { reset () { this.counter = 0 }, addOne () { this.counter++ } } }) store 파일을 생성합니다. pinia 사용하기 hello {{ na..

VUE.JS 목록 Style & Identity https://quasar.dev/style/typography hello shadow Layout https://quasar.dev/layout/grid/introduction-to-flexbox col col col Alignment 가로정렬 One of two cols One of two cols 세로정렬 One of three cols One of three cols VUE.JS 목록

VUE.JS 목록 부모, 자식 콤포넌트간 데이터 공유를 위하여 사용함 parentComponent.vue childComponent.vue {{ text }} VUE.JS 목록

VUE.JS 목록 quasar/cli 설치 $ sudo npm install -g @quasar/cli 프로젝트 생성 $ npm init quasar Need to install the following packages: create-quasar Ok to proceed? (y) .d88888b. d88P" "Y88b 888 888 888 888 888 888 8888b. .d8888b 8888b. 888d888 888 888 888 888 "88b 88K "88b 888P" 888 Y8b 888 888 888 .d888888 "Y8888b. .d888888 888 Y88b.Y8b88P Y88b 888 888 888 X88 888 888 888 "Y888888" "Y88888 "Y888888 88888P..

VUE.JS 목록 https://quasar.dev/ Quasar Framework - Build high-performance VueJS user interfaces in record time Developer-oriented, front-end framework with VueJS components for best-in-class high-performance, responsive websites, PWA, SSR, Mobile and Desktop apps, all from the same codebase. Sensible people choose Vue. Productive people choose Quasar. Be both. quasar.dev Quasar 설치 $ npm install qu..

VUE.JS 목록 Test Reactive {{ username }} 이름 변경 제품명: {{ item }}, 가격: {{ price }} 제품 변경 VUE.JS 목록

VUE.JS 목록 Option 방식 Test Option 증가 Composition 방식 Test Composition 증가 script-setup 방식 Test Setup 증가 Child 콤포넌트 Option 방식 TestOption.vue Test Option 증가 TestOptionItem.vue Test Option Item name: {{ name }} age: {{ age }} birth: {{ birth }} Composition 방식 TestComposition.vue Test Composition 증가 TestCompositionItem.vue Test Composition Item name: {{ name }} age: {{ age }} birth: {{ birth }} Setup 방식..

VUE.JS 목록 Volar는 VSCode에서 구문 강조 표시, typescript 지원, 템플릿 표현식 및 구성 요소를 도와줘서 코딩을 편리하게 해줍니다. 지금 Vetur가 설치되어 있어서 Vetur로 경고가 표시됩니다. Vetur 비활성화 기존에 Vetur를 사용했다면 VSCode에서 Vetur를 해당 프로젝트에서만 비활성화 해줍니다. (다른 프로젝트에서는 사용할 수 있음) Vetur를 비활성화하면 .vue 파일 코드에 색상을 표시하지 않습니다. Volar 설치 Volar를 검색해서 두개의 플러그인을 설치합니다. 사용 안함으로 변경했다가 현재 프로젝트에서만 사용할 수 있도록 설정합니다. .vue 파일이 다시 색상이 표시됩니다. eslint 설정 코드에 노란색 줄 표시가 되어 있습니다. command ..