[Vue.js를 활용한 퍼블리싱] vue-paper-dashboard (1) 프로젝트 구조

Vue.js를 활용하여 컴포넌트를 구성하고 퍼블리싱 하는 노하우를 얻기 위해 오픈소스를 분석해봅니다. 

첫번째 오픈소스는 Creative Tim 팀에서 만든 vue-paper-dashboard free 버전 소스입니다.

 

https://www.creative-tim.com/product/vue-paper-dashboard

Vue Paper Dashboard by Creative Tim

 

숙련된 프론트엔드 엔지니어는 Vue.js를 활용하여 어떻게 퍼블리싱하는지 파악하는 것이 목표입니다.

프로젝트 코드를 다운받은 후 아래 설명과 함께 봐주세요 :)

포스팅에 Vue.js만을 다루지 않고 개인적인 학습 목적으로 html, css, Sass 등 프론트엔드와 관련된 여러 부분을 다룰 것입니다.

 

---

프로젝트 전체 구조

 

Vue CLI로 프로젝트를 생성해 사용해보신 분들에게는 익숙한 프로젝트 폴더 구조일 것입니다. 

 

src 폴더 위주로 살펴보겠습니다.

 

 1. assets : css, fonts, img 관련 파일

 2. components : 프로젝트에서 반복적으로 사용되는 컴포넌트들을 slot을 활용하여 재사용성 높게 구현

 3. layout\dashboard : Sidebar 메뉴의 모든 페이지들은 같은 layout을 가짐. 해당 레이아웃을 구성하는 공통 컴포넌트들

 4. pages : Sidebar 메뉴를 클릭했을 때 나타나는 페이지들. layout의 Content 부분을 채움

 5. plugins : Local Plugin들을 구현

 6. router : Vue-Router 설정

 

 

아래에서 조금 더 자세히 살펴봅니다. 

 

 

 

 

 

 

 

 

 

 

 

---

layout\dashboard

layout folder

dashboard 화면

DashboardLayout.vue에 하위 컴포넌트들로 레이아웃 구성이 되어 있습니다. 왼쪽에 Sidebar는 플러그인으로 구현되어 있어 위 폴더에서 보이지 않습니다. 해당 프로젝트의 모든 화면은 위 레이아웃으로 되어 있고 크게 Sidebar, TopNavbar, Content, ContentFooter로 구성되어 있음을 알 수 있습니다. 왼쪽 Sidebar 메뉴를 클릭할 때마다 Content와 TopNavbar, ContentFooter의 텍스트가 변경됩니다.

MobileMenu.vue는 짐작하셨다시피 브라우저의 화면이 작아졌을 때 반응형으로 Sidebar가 숨겨지고 나타나는 햄버거 버튼 메뉴 컴포넌트입니다.

Mobile 화면

 

---

Pages

Sidebar 메뉴를 클릭했을 때 Content에 나타나는 컴포넌트들이 구현되어 있습니다.

Notifications와 UserProfile 화면의 경우 해당 화면에서만 사용될 목적으로 만들어진 하위 컴포넌트들도 구현되어 있습니다.

 

---

Plugins

plugins 폴더

위 모듈은 전역 컴포넌트와 전역 지시자로 사용할 컴포넌트들을 install이라는 함수를 통해서 명시적으로 등록하기 위한 목적을 가지고 있습니다. paperDashboard.js의 install 함수만 실행시키면 전역 컴포넌트와 전역 지시자가 등록됩니다. 어떤 컴포넌트가 전역적으로 등록되었는지 쉽게 관리할 수 있기 때문에 코드 유지보수성이 향상됩니다.

 

---

지금까지 vue-paper-dashboard 프로젝트의 전체 폴더구조를 간략하게 살펴보았습니다.

다음 포스팅에서는 해당 프로젝트에서 어떤 구조로 css preprocessor 중 하나인 Sass 파일들을 관리하고 있는지 살펴보겠습니다.