[ Spring Boot + Quasar ] 2. Quasar UI / component 가져다 쓰기
1. [ Spring Boot + Quasar ] 1. 프로젝트 환경설정
★ 2. [ Spring Boot + Quasar ] 2. Quasar UI / component 가져다 쓰기
0. 기본 화면 Flow
프로젝트폴더/src/index.template.html
url접속시 routes.js 설정 정보에 따라. MainLayout.vue의 <router-view/> 태그에 해당하는 파일을 보여준다.
UI 는 https://quasar.dev/에서 원하는 UI를 가져다가 가공하여 사용하면 된다.
1. Layout 변경.
1.1. https://quasar.dev/layout-builder 에 접속 원하는 Layout를 선택합니다.
1.2. 복사한 소스를 프로젝트폴더/src/layouts/MainLayout.vue 에 붙여넣고, 저장합니다.
2. Quasar 에서 component 가져오기
https://quasar.dev/vue-components/에서 원하는 컴포넌트 조회하고 , editor component 를 추가합니다.
https://quasar.dev/vue-components/editor
2.1. vue 파일을 추가합니다
- 프로젝트명/src/pages/editor.vue
2.2. https://quasar.dev/vue-components/editor 에서 '<>' 를 클릭하고 소스를 확인합니다.
소스의 TEMPLAE / SCRIPT / STYLE 탭을 선택, 복사하여 editor.vue 에 붙여넣기 합니다.
2.3. routes.js 에 방금 생성한 editor.vue uri 정보를 등록합니다.
2.4. 페이지확인
* 존재하지 않는 url로 접속해보자. routes.js 의 children 에 선언되지 않은 경로는 Error404.vue로 이동한다.