Celeris Web은 Vue 3, Vite 및 TypeScript를 포함한 최신 기술을 활용하는 무료 오픈 소스 프런트 엔드 개발 프레임워크입니다. 단일 저장소 접근 방식을 사용하면 종속성을 쉽게 관리하고 여러 프로젝트에서 협업할 수 있어 개발자에게 최신 웹 애플리케이션 구축을 위한 포괄적인 솔루션을 제공합니다.
숙련된 개발자이든 이제 막 시작하는 개발자이든 상관없이 Celeris Web은 최신 도구와 기술을 활용하는 간소화된 프런트엔드 개발 프로세스를 제공합니다.
지금 celeris-web을 시작하고 최첨단 자연어 처리 기능을 포함한 최신 기술의 힘을 활용하는 매우 간소화된 프런트 엔드 개발 프로세스를 경험해 보십시오.
그래프 TD
관리자{관리자}
관리자 --> 관리-API
관리자 --> 자산
관리자 --> CA 구성 요소
관리자 --> 구성 요소
관리자 --> 상수
관리자 --> 지시어
관리자 --> 후크
관리자 --> 로케일
관리자 --> 요청
관리자 --> 스타일
관리자 --> 유형
관리자 --> 유틸리티
자산
구성 요소
구성요소 --> 자산
구성 요소 --> CA 구성 요소
구성 요소 -> 상수
구성 요소 -> 스타일
구성요소 --> 유형
구성 요소 -> 유틸리티
CA 구성 요소
ca 구성요소 --> 상수
ca 구성 요소 --> 유틸리티
지시어
지시문 --> 유틸리티
후크
후크 --> 유형
장소
로케일 --> 상수
로케일 --> 유형
로케일 --> 유틸리티
요구
요청 -> 상수
요청 --> 로케일
요청 --> 유형
요청 --> 유틸리티
종류
유형 --> 상수
유틸리티
유틸리티 --> 유형
관리 API
admin-api --> 상수
admin-api --> 유형
위 다이어그램을 업데이트하려면 README 파일을 편집하고 변경 사항이 포함된 새 PR을 엽니다.
Celeris Web 디자인에서는 코드의 가독성과 학습성을 강조합니다. 이를 달성하기 위해 각 기능에는 중국어와 영어로 된 이중 언어 주석이 탑재되어 있어 개발자가 모국어에 관계없이 코드를 쉽게 이해하고 배울 수 있습니다.
이중 언어 댓글을 선택하는 이유는 무엇입니까?
글로벌 협업: 다문화 팀에서 이중 언어 댓글은 더 나은 의사소통과 협업을 촉진하여 팀 구성원이 코드의 기능과 구현을 정확하게 이해할 수 있도록 보장합니다.
편리한 학습: 이중 언어 주석은 초보자에게 보다 사용자 친화적인 학습 환경을 제공하여 코드의 논리와 구조를 빠르게 파악할 수 있도록 도와줍니다.
개발자 친화적: 우리는 개발자 친화적인 환경을 만들기 위해 최선을 다하고 있으며, 이중 언어 댓글은 이러한 목표를 달성하기 위해 취한 중요한 조치입니다.
예:
/**
* 打开一个新的浏览器窗口
* Open a new browser window
*
* @param {string} url - 要在新窗口中打开的 URL
* The URL to open in the new window
*
* @param {object} options - 打开窗口的选项
* Options for opening the window
* @param {string} options.target - 新窗口的名称或特殊选项,默认为 "_blank"
* @param {string} options.features - 新窗口的特性(大小,位置等),默认为 "noopener=yes,noreferrer=yes"
*/
export function openWindow ( url : string , { target = "_blank" , features = "noopener=yes,noreferrer=yes" } : {
target ?: "_blank" | "_self" | "_parent" | "_top" ; // 新窗口的名称或特殊选项,默认为 "_blank"
features ?: string ; // 新窗口的特性(大小,位置等),默认为 "noopener=yes,noreferrer=yes"
} = { } ) {
window . open ( url , target , features ) ;
}
이러한 이중 언어 설명을 통해 우리는 개발자에게 더욱 즐겁고 효율적인 코딩 경험을 제공하여 Celeris Web을 정말 쉽게 선택하고 살펴볼 수 있는 프런트엔드 템플릿으로 만드는 것을 목표로 합니다.
1. 더욱 쉬워진 종속성 관리: Monorepo는 모든 프로젝트의 종속성 관리를 중앙 집중화하여 서로 다른 프로젝트 간의 버전 충돌을 피하고 전반적인 종속성 관리를 더 명확하고 단순하게 만듭니다.
2. 코드 공유 및 재사용성: 다양한 프로젝트에서 코드를 쉽게 공유하고 재사용할 수 있어 중복 개발 작업량을 줄일 수 있습니다. 이는 코드 일관성을 유지하고 개발 효율성을 향상시키는 데 매우 유용합니다.
3. 통합 빌드 및 배포: Monorepo는 통합 빌드 및 배포 워크플로를 통해 전체 개발 프로세스를 단순화하여 구성 및 관리의 복잡성을 줄이고 개발 팀 내 협업 효율성을 향상시킵니다.
4. 통합 버전 제어: 동일한 버전 제어 저장소에 있는 모든 프로젝트를 사용하면 버전 관리가 더욱 일관되고 제어 가능해집니다. 이는 팀이 버전 관련 문제를 더 잘 추적하고 처리하는 데 도움이 됩니다. Monorepo 디자인은 Celeris Web을 관리 시스템 템플릿뿐만 아니라 빠르게 개발되는 C 엔드 제품을 위한 프런트엔드 웹 템플릿으로도 활용합니다. Celeris Web을 사용하면 프런트엔드 개발 여정이 더욱 편안하고 즐거워집니다!
시장에서 대부분의 프런트엔드 템플릿은 주로 B-end 사용자의 요구 사항을 충족하여 엔터프라이즈 관리 시스템(Admin)을 위한 강력한 기능과 유연한 인터페이스를 제공합니다. 그러나 C-end 제품의 특성을 디자인에 고려한 템플릿은 거의 없으며 이것이 바로 Celeris Web이 혁신을 이루는 부분입니다.
관리자 관리의 한계를 뛰어넘다:
기존의 관리자 관리 시스템은 데이터 표시 및 비즈니스 관리를 우선시하는 반면, C-end 제품은 사용자 경험과 시각적 매력을 강조합니다. 미학적으로 만족스러운 인터페이스와 원활한 상호 작용에 대한 C 엔드 사용자의 요구를 인식한 Celeris Web은 강력한 백엔드 관리 기능을 제공할 뿐만 아니라 프런트엔드 인터페이스를 더 높은 수준의 사용자 만족도로 높이는 데 중점을 둡니다.
C-End 사용자 경험에 초점:
Celeris 웹은 단순한 관리 시스템용 템플릿이 아닙니다. C-end 제품에 대한 사용자 경험을 우선시하는 프런트엔드 웹 템플릿입니다. 우리는 혁신적인 디자인 원칙을 도입하여 기존 관리 시스템의 제약에서 벗어나 프런트엔드에 제시된 C-end 제품이 뛰어난 사용자 경험을 제공하도록 하는 것을 목표로 합니다.
주요 기능:
이러한 독특한 디자인 철학을 바탕으로 Celeris Web은 프런트엔드 개발의 새로운 가능성을 탐색하고 C 엔드 제품에 더 많은 활력과 창의성을 불어넣기 위해 노력하고 있습니다. 우리는 이러한 혁신이 광범위한 사용자 인지도를 얻고 제품 가치를 높이는 데 기여할 것이라고 믿습니다. Celeris 웹 세계에서 프런트엔드 개발은 관리 시스템의 한계를 뛰어넘어 사용자 경험과 관련된 보다 흥미로운 요소를 통합합니다.
GitHub의 이 템플릿에서 리포지토리를 만듭니다.
npx degit kirklin/celeris-web my-vite-app
cd my-vite-app
pnpm i
그냥 실행하고 http://localhost:8888을 방문하세요.
pnpm run dev
앱을 빌드하려면 다음을 실행하세요.
pnpm run build
그러면 제공될 준비가 된 생성된 파일이 dist
에 표시됩니다.
Netlify로 이동하여 클론을 선택하고 OK
하세요. 그러면 앱이 1분 안에 활성화됩니다.
먼저 프로젝트의 루트 디렉터리에서 터미널을 열어 celeris-web 이미지를 빌드합니다.
docker buildx build . -t celeris-web:latest
이미지를 실행하고 -p
플래그를 사용하여 포트 매핑을 지정합니다.
docker run --rm -it -p 8080:80 celeris-web:latest