Vue 13

국회도서관 자료 검색 vue.js 화면 스케치 #14

국회도서관 도서검색은 5개의 흐름으로 진행한다.검색어 입력검색어로 국회도서관 도서검색 API 호출도서검색된 결과 리스트 노출특정 도서 클릭클릭된 도서의 상세정보 노출5개의 흐름을 3개의 페이지로 구성한다.SearchMain.vue검색 메인 페이지검색어 입력 ▶ 1번 흐름 진행vue router 활용하여 페이지 호출ResultList.vue검색결과 리스트검색어로 국회도서관 도서검색 API 호출 ▶ 2번 흐름 진행도서검색된 결과 리스트 노출 ▶ 3번 흐름 진행axios 모듈 이용하여 API 호출ResultDtl.vue상세 도서 정보특정 도서 클릭 ▶ 4번 흐름 진행클릭된 도서의 상세정보 노출 ▶ 5번 흐름 진행modal 팝업으로 노출vuetify의 data tables component로 개발화면 구성 스케..

vue router, vuetify 설치하기 #13

Vue.js 프로젝트에서 Vue Router와 Vuetify를 설치하는 방법을 정리했다. ✅ Vue Router란? Vue Router는 Vue.js에서 페이지 간 이동(라우팅)을 담당하는 공식 라이브러리이다.SPA 구조에서 URL을 변경하면서도 전체 페이지를 다시 로드하지 않도록 도와준다. 📌 Vue Router 공식 사이트🔗 https://router.vuejs.org/installation.html Vue Router | The official Router for Vue.jsThe official Router for Vue.jsrouter.vuejs.org ✅ Vuetify란? Vuetify는 Vue.js 기반의 Material Design UI 프레임워크다.버튼, 카드, 네비게이션 바 등 다양..

vue, vue cli 설치하고 버전 확인 #12

국회도서관 자료검색 서비스를 위한 프런트엔드 웹 환경 구성작업 환경작업폴더명public_data/pubd_web프로젝트 명pubdwebOSmacOS sonoma v 14.5☞ vue cli 의 가이드는 아래 URL에서 자세히 다루고 있다.https://cli.vuejs.org/ vue cli 는 vue.js 프레임워크를 포함하고 있어, 별도 vue.js 설치를 안 해도 된다.vue.js 프로젝트 생성 시 vue version 선택가능vue cli 설치pubd_web 폴더로 이동하여 설치npm install -g @vue/clivue cli 는 전역으로 설치되기 때문에 이전에 설치한 이력이 있으면 vue project로 바로 진행하면 된다.#vue cli 설치#pubd_web 폴더로 이동하여 설치#npm ..