Vue-Admin 템플릿: 권한 기반 내비게이션 및 전체화면 기능 구현
이번 글에서는 이전에 작업한 Vue-admin 프로젝트에 Breadcrumb(이동 경로)와 Screenfull(전체화면) 기능을 추가하는 과정을 다룹니다.
Breadcrumb 컴포넌트 구현
Element-UI의 el-breadcrumb와 el-breadcrumb-item을 활용하여 현재 경로를 표시하는 내비게이션을 만듭니다. 기본적인 사용 예시는 다음과 같습니다.
<el-breadcrumb separator-class="el-icon-arrow-r ...
6월 18일 23:23에 게시됨
Vue.js 기반 관리자 대시보드 구성 요소 분석
사이드바 메뉴 구현 (ElMenu 활용)
Element UI의 el-menu 컴포넌트를 사용하여 반응형 사이드 내비게이션을 구성합니다. 주요 속성은 다음과 같습니다:
collapse: 수직 모드에서 메뉴 접기/펼치기 제어
backgroundColor, textColor: 시각적 스타일링을 위한 색상 설정
active-text-color: 활성화된 메뉴 항목 강조 색상
...
6월 6일 02:41에 게시됨
Vue.js 기반 관리자 패널에서 탭 네비게이션 구현 및 라우트 캐싱 전략
Vue.js와 Element UI를 기반으로 한 관리자 대시보드에서 탭 기반 네비게이션(TagsView)을 구현할 때, 사용자가 방문한 페이지를 시각적으로 유지하고 컴포넌트 상태를 효율적으로 캐싱하는 것은 중요한 요구사항이다. 이 기능은 주로 keep-alive와 Vue Router의 조합을 통해 실현되며, Vuex를 활용해 상태를 중앙에서 관리한다.
visitedViews 와 cachedViews: 두 가 ...
6월 5일 23:30에 게시됨
SpringBoot, Vue.js, Element-UI 기반 온라인 블로그 시스템 개발
1. 시스템 개요
이 온라인 블로그 시스템은 현대 웹 개발 기술 스택을 활용하여 설계 및 구현되었습니다. 백엔드는 Spring Boot 프레임워크를 기반으로 하며, 데이터 지속성을 위해 MyBatis-Plus를 사용하고, 사용자 인증 및 권한 관리는 Spring Security 기술로 제어합니다. 데이터베이스는 MySQL을 채택했습니다. 프론트엔드는 Vue 2.x, Element-UI, Axios, ECharts 등의 ...
5월 23일 21:19에 게시됨