vue dash

VueDash(Vue Nuxt.js 3 Tailwind CSS 관리 대시보드 템플릿)

Vue.js , Nuxt.js 3 , NuxtUI 및 Tailwind CSS 로 구축된 현대적이고 반응성이 뛰어나며 사용자 정의 가능한 관리 대시보드 템플릿입니다. 이 템플릿은 깔끔하고 최소한의 디자인으로 강력한 관리 인터페이스, 대시보드, 웹 애플리케이션을 구축하는 데 적합합니다.

특징

• Nuxt.js 3 : Vue 3 컴포지션 API를 사용한 원활한 SSR(서버 측 렌더링) 및 SSG(정적 사이트 생성).
• Tailwind CSS : 빠르고 반응성이 뛰어난 UI 개발을 위한 유틸리티 우선 CSS 프레임워크입니다.
• 할 일 목록 관리 : CRUD 할 일 목록 관리 지원 내장
• Invoice Maker : 대화형 Invoice Maker인 CRUD에 대한 내장 지원
• 재사용 가능한 구성 요소 : 손쉬운 사용자 정의를 위한 재사용 가능한 모듈형 UI 구성 요소입니다.
• 다크 모드 : 밝은 테마와 어두운 테마를 기본적으로 지원합니다.
• 반응형 디자인 : 모든 화면 크기에 완벽하게 최적화되었습니다.
• 동적 라우팅 : Nuxt.js로 구동되는 유연한 라우팅 시스템입니다.
• 확장 가능 : 새 페이지, 구성 요소 및 플러그인을 쉽게 추가할 수 있습니다.

? 기술 스택

• 프런트엔드 프레임워크 : Vue.js 3(컴포지션 API)
• 메타 프레임워크 : Nuxt.js 3
• 스타일링 : Tailwind CSS
• UI 컴포넌트 라이브러리 : NextUI
• 패키지 관리자 : pnpm

설치

1. 저장소를 복제하십시오 .

   git clone https://github.com/Kei-K23/vue-dash
   cd vue-dash

2. 종속성 설치 :

   pnpm install
   # or
   npm install

3. 개발 서버를 실행합니다 .

   pnpm run dev
   # or
   npm run dev

4. 브라우저를 열고 http://localhost:3000 으로 이동합니다.

---

파일 구조

 admin-dashboard-template/
├── layouts/           # Layouts for the app
├── pages/             # Nuxt.js pages and routes
├── features/          # Organize logic, ui components and state into domain or feature
├── public/            # Static assets
├── nuxt.config.ts     # Nuxt.js configuration
└── tailwind.config.js # Tailwind CSS configuration

? 경로 및 페이지 문서

노선	페이지 이름	설명
/	메인 페이지	관리 대시보드의 기본 랜딩 페이지입니다.
/login	로그인 페이지	사용자가 로그인하여 관리 대시보드에 액세스할 수 있습니다.
/register	등록 페이지	신규 사용자가 계정을 생성할 수 있도록 합니다.
/contact	연락처 페이지	사용자가 지원이나 문의를 위해 연락할 수 있는 양식을 표시합니다.
/invoice	송장 페이지	청구서 목록이나 재무 기록 세부정보를 표시합니다.
/todo	Todo 앱 페이지	할 일 목록 형식으로 작업을 관리하고 추적하는 페이지입니다.
/products	제품 페이지	상세정보, 가격 등 상품정보를 관리하는 페이지입니다.
/order-lists	주문 목록 페이지	모든 고객 주문을 보고 관리할 수 있는 옵션과 함께 나열합니다.
/product-stock	제품 재고 페이지	현재 재고 수준과 재고 관리 옵션을 표시합니다.
/settings	설정 페이지	사용자가 시스템 설정 및 개인 기본 설정을 관리할 수 있습니다.
/team	팀 페이지	팀 구성원, 역할 및 권한 관리 옵션을 보여줍니다.

? 맞춤화

순풍 CSS

tailwind.config.js 파일을 수정하여 테마를 사용자 정의하고 스타일을 확장하거나 플러그인을 추가하십시오.

구성요소

모든 구성 요소는 features/(domain)/ 디렉터리 내의 components/ 디렉터리에 있습니다. 프로젝트 요구 사항에 맞게 새 구성 요소를 만들거나 기존 구성 요소를 확장하세요.

페이지 및 라우팅

새 경로를 동적으로 생성하려면 pages/ 디렉터리에 파일을 추가하거나 편집하세요.

? 종속성

• 뷰 3
• Nuxt.js 3
• 순풍 CSS
• NuxtUI

선적 서류 비치

인증 설정

Nuxt의 미들웨어 및 플러그인을 사용하여 모든 인증 서비스(예: Firebase, Auth0 또는 사용자 정의 JWT)를 통합할 수 있습니다. 자세한 내용은 Nuxt.js 인증 모듈을 참조하세요.

API 통합 추가

pages/ 또는 composables/ 디렉터리에서 Nuxt의 서버 경로 또는 외부 API 호출을 사용하세요. 여기에서 Nuxt.js API 처리에 대해 자세히 알아보세요.

? 테스트

단위 테스트

Vue 구성 요소의 단위 테스트를 위해 Vitest를 설치하고 구성합니다.

엔드 투 엔드 테스트

엔드투엔드 테스트에는 Cypress 또는 Playwright를 사용하세요.

전개

1. SSG(정적 사이트 생성) :

   pnpm run generate

   dist/ 폴더에서 생성된 파일을 정적 호스팅 공급자(예: Netlify, Vercel)에 배포합니다.

2. 서버 측 렌더링(SSR) :

   pnpm run build
   pnpm run start

   Node.js 호스팅(예: AWS, Heroku 또는 DigitalOcean)에 애플리케이션을 배포합니다.

? 지원하다

문제가 발생하거나 질문이 있거나 새로운 기능이나 페이지를 요청하고 싶다면 언제든지 문제를 공개하거나 [email protected]으로 문의하세요.

? 기여

기여를 환영합니다! 다음 단계를 따르십시오.

1. 저장소를 포크하십시오.
2. 기능 분기를 만듭니다( git checkout -b feature-name ).
3. 변경 사항을 커밋합니다( git commit -m "Add feature" ).
4. 브랜치로 푸시합니다( git push origin feature-name ).
5. 풀 요청을 엽니다.

특허

이 프로젝트는 MIT 라이선스에 따라 라이선스가 부여됩니다.

? 감사의 말

• Vue.js
• Nuxt.js
• NuxtUI
• 순풍 CSS

페이지 미리보기

데스크톱 보기

태블릿 보기

모바일 보기