Quasar로 SettingPage copy해서 만들기

이번에는 quasar project를 직접 만든 다음에 이를 가지고 아까 참조한 세팅page를 만들어보겠다.

먼저 저번에 올린 포스팅을 참고해서 하나의 프로젝트를 만들어준다.

다음으로 SettingPage.vue를 src에 pages폴더 안에 만든다. 여기에는 내가 어차피 다 만들어야 하지만, 앞서 봤던 Awsome quasar를 붙여넣고 이를 토대로 공부하며 바꿔나가며 연습하려고 한다. 그래서 그 open source code를 긁어 넣었다. 그리고 IndexPage.vue에서 SettingPage.vue로 이동할 있게 첫 페이지에 버튼을 만들어준다.

<q-btn
	color="primary"
    label="Setting"
    @click="$router.push('/setting')" />

이제 버튼을 만든 것이다. 일단 색은 primary로 지정(기본 세팅), 버튼에 써있는 라벨은 setting, 클릭하면 라우터의 setting으로 푸시된다.

그럼 라우터를 손보러 가야된다. routes.js로 이동하여 기존에 있던 path 아래 새로운 path를 추가해준다.

children: [
{ path: '', component: () => import('pages/IndexPage.vue') },
{ path: 'setting', component: () => import('pages/SettingPage.vue') }
]

이로써 퀘이사 기본 페이지에서 버튼을 누르면 routes로 전잘되어 SettingPage.vue로 이동되는 과정을 만들어봤다.

다음은 내가 만들려는 setting 화면 구현이다.