admin dashboard starter

갤럭시에서 가장 쉬운 관리자 대시 보드 키트!

우리의 목표는 스파 개발을 단순화하는 것입니다 - 오늘 관리자 대시 보드를 배송하십시오. 중점은 스택/아키텍처/디자인 패턴에 중점을두고 미학은 아닙니다. 이 디자인은 단순하게 유지하고 자신의 디자인을 쉽게 구현할 수 있도록 최소화됩니다.

우리는 디자인 부분을 다루고 있습니다 - 주요 관리자 프레임 워크를 관리 대시 보드 스타터 기술로 포팅합니다. 다음은 전체 목록입니다 (별이 많을수록 더 많은 작업을 수행 할 수 있습니다) :

• 타블러
• adminlte
• 관리자
• 재료 대시 보드

Svelte와 Sapper로 제작되었습니다. 롤업은 프로젝트를 구축합니다. FireBase 호스팅으로 배포되며, 현재 서버에 직접 또는 직접 서버로 배포하십시오.

대체로 오늘 라이브 관리자 대시 보드를 배포 할 수 있습니다.

특징

• 사용하기 쉬운 구성 요소 시스템. 구성 요소는 일반 HTML, CSS, JS입니다.
• 폴더 기반 라우팅.
• 강력한 인증 시스템. Firebase, Passport.js 또는 Auth0을 쉽게 연결하십시오.
• 구성 요소 기반 테스트 및 개발. 단일 구성 요소 렌더링 - 작동하고 더 빨리 반복하십시오. 강력한 단위 테스트/구성 요소 테스트 시스템 설정.
• 데이터 소스. 데이터베이스, 파일 또는 원격 서버에서 자체 데이터를 쉽게 연결하십시오.
• Cypress와의 통합 테스트.
• 명령 줄에서 Dev와 Prod 환경 사이를 전환합니다.
• 명령 줄에서 인기있는 서비스로 배포됩니다.

프로젝트 실행

그러나 코드를 얻고 종속성을 설치하고 프로젝트를 개발 모드로 실행할 수 있습니다.

 cd admin-dashboard-starter
npm install # or yarn
npm run dev

LocalHost : 3000을 열고 클릭을 시작하십시오.

시작하는 데 도움이되는 Sapper.svelte.dev를 참조하십시오.

구조

Sapper는 프로젝트의 루트에서 src 와 static 두 가지 디렉토리를 찾을 것으로 예상합니다.

SRC

SRC 디렉토리에는 template.html 파일 및 routes Directory와 함께 client.js , server.js 및 (선택적으로) service-worker.js 의 출입문이 포함되어 있습니다.

SRC/경로

이것은 Sapper 앱의 핵심입니다. 페이지 와 서버 경로 의 두 가지 경로가 있습니다.

페이지는 .svelte 파일로 작성된 Svelte 구성 요소입니다. 사용자가 응용 프로그램을 처음 방문하면 해당 경로의 서버 렌더링 버전과 페이지를 '수화'하고 클라이언트 측 라우터를 초기화하는 JavaScript가 제공됩니다. 그 시점부터 다른 페이지로 탐색하는 것은 빠르고 앱과 같은 느낌을 얻기 위해 클라이언트에 전적으로 처리됩니다. (Sapper는이 후속 페이지의 코드를 예압하고 캐시하여 내비게이션이 즉각적이되도록합니다.)

서버 경로는 .js 파일로 작성된 모듈이며, 내보내기 기능은 HTTP 메소드에 해당합니다. 각 함수는 인수로 Express request 및 response 객체를 수신하고 next 함수를 수신합니다. 예를 들어 JSON API를 작성하는 데 유용합니다.

경로를 정의하는 파일의 이름 지정에 대한 세 가지 간단한 규칙이 있습니다.

• src/routes/about.svelte 라는 파일은 /about 에 해당합니다. src/routes/blog/[slug].svelte 라는 파일은 /blog/:slug params.slug 에 해당합니다.
• src/routes/index.svelte (또는 src/routes/index.js ) 파일은 앱의 루트에 해당합니다. src/routes/about/index.svelte src/routes/about.svelte 와 동일하게 처리됩니다.
• 선행 밑줄이있는 파일 및 디렉토리는 경로를 생성하지 않습니다 . 이를 통해 도우미 모듈과 구성 요소가 그에 의존하는 경로와 통합 할 수 있습니다. 예를 들어 src/routes/_helpers/datetime.js 라는 파일을 가질 수 있으며 /_helpers/datetime Route를 생성하지 않습니다 .

공전

정적 디렉토리에는 사용할 수있는 정적 자산이 포함되어 있습니다. SIRV를 사용하여 제공됩니다.

Service-Worker.js 파일에서 생성 된 Manifest에서 files 로이 파일을 가져올 수 있습니다 ...

 import { files } from '@sapper/service-worker' ;

... 캐시 할 수 있도록 (예를 들어 매우 큰 파일을 캐시하지 않으려면 선택하지 않도록 선택할 수 있지만).

분들러 구성

Sapper는 롤업 또는 웹 팩을 사용하여 코드 분할 및 동적 가져 오기를 제공 할뿐만 아니라 벨트 구성 요소를 컴파일합니다. WebPack을 사용하면 핫 모듈 리로드도 제공합니다. 멍청한 일을하지 않는 한 구성 파일을 편집하여 원하는 플러그인을 추가 할 수 있습니다.

생산 모드 및 배포

앱의 프로덕션 버전을 시작하려면 npm run build && npm start 실행하십시오. 이렇게하면 라이브 재 장전이 비활성화되고 적절한 Bundler 플러그인이 활성화됩니다.

노드 8 이상을 지원하는 모든 환경에 응용 프로그램을 배포 할 수 있습니다. 예를 들어, 지금 배포하려면이 명령을 실행하십시오.

npm install -g now
now

외부 구성 요소 사용

@sveltejs/svelte-virtual-list와 같은 NPM에서 설치 한 Svelte 구성 요소를 사용하는 경우 Svelte에는 원래 구성 요소 소스가 필요합니다 (구성 요소와 함께 제공되는 사전 컴파일 된 JavaScript가 아닌). 이를 통해 컴포넌트를 서버 측 렌더링하고 클라이언트 측 앱을 더 작게 유지할 수 있습니다.

이 때문에 번들러는 패키지를 외부 의존성 으로 취급하지 않아야합니다. rollup.config.js에서 server 에서 external 옵션을 수정하거나 webpack.config.js의 externals 옵션을 단순히 dependencies 보다는 devDependencies 에 패키지를 설치할 수 있으므로 번들로 번들 (따라서 컴파일)을 만들 수 있습니다. 앱 :

npm install -D @sveltejs/svelte-virtual-list

버그 및 피드백

DBH 문제 추적기에 대해 보컬하십시오.