국내 최고의 HTML, CSS, JavaScript 오픈소스 프로젝트 18개-PHP 튜토리얼-php.cn

프론트엔드 개발자라면 HTML, CSS, JavaScript는 숙달해야 할 세 가지 필수 기본 기술입니다. 물론 우리는 그것을 사용하는 데에도 매우 능숙해야 합니다. 학습하는 가장 좋은 방법은 현재 인기 있는 오픈 소스 프로젝트를 이해하는 것입니다. 이 기사에서는 더 많은 개발자가 학습을 확장하는 데 도움이 되기를 바라며 중국에서 가장 높은 평가를 받고 100개 이상의 컬렉션을 보유한 프런트 엔드 기술 오픈 소스 프로젝트를 살펴봅니다.

1. 미니멀리스트 모듈식 프런트 엔드 UI 프레임워크 Layui

등급: 9.3; 컬렉션 수: 873

승인 계약: MIT

개발 언어: JavaScript, HTML/CSS

운영 체제: 크로스 플랫폼

소스 코드 주소: https://gitee.com/sentsin/layui

Layui는 자체 모듈 사양으로 작성된 감성적인 프런트 엔드 UI 프레임워크로 기본 HTML/CSS/JS의 작성 및 구성 형식을 따릅니다. 매우 낮아 즉시 사용할 수 있습니다. 외부는 미니멀하지만 내부는 꽉 차 있습니다. 크기가 가볍고 구성 요소가 풍부합니다. 핵심 코드부터 API까지 모든 세부 사항이 신중하게 제작되어 빠른 인터페이스 개발에 매우 적합합니다. Layui의 첫 번째 버전은 2016년 황금빛 가을에 출시되었습니다. MVVM의 하위 레이어를 기반으로 하는 UI 프레임워크와는 다르지만, 그 방식에 어긋나지 않고 자연으로의 회귀를 믿습니다. 정확하게 말하자면, 다양한 프런트엔드 도구의 복잡한 구성에 관여할 필요가 없으며, 필요한 모든 요소와 상호 작용을 할 수 있는 것은 서버 측 프로그래머에게 더 적합합니다. 당신의 손끝에서 찾을 수 있습니다.

2. JavaScript 차트 라이브러리 ECharts

등급: 8.9; 컬렉션: 2448

라이센스 계약: BSD

개발 언어: JavaScript

소스 코드 주소: https:// gitee .com/echarts/echarts

ECharts는 Baidu의 프런트 엔드 기술 부서에서 개발한 Javascript 기반 데이터 시각화 차트 라이브러리로, 직관적이고 생생하며 대화형이며 사용자 정의 가능한 데이터 시각화 차트를 제공합니다. 일반적으로 사용되는 다수의 데이터 시각화 차트를 제공합니다. 하단 레이어는 ZRender(새로운 경량 캔버스 클래스 라이브러리)를 기반으로 좌표계, 범례, 프롬프트, 도구 상자 및 기타 기본 구성 요소를 생성하고 선 차트(영역 차트)를 작성합니다. 그 외에 히스토그램(막대 차트), 분산형 차트(버블 차트), 파이 차트(도넛 차트), K-라인 차트, 맵, 강제 방향 레이아웃 차트 및 코드 차트도 지원합니다. 여러 차트 표시.

3. 국내 크로스 스크린 반응형 프론트엔드 프레임워크 퍼즐 Pintuer

등급: 8.7; 수집: 220

권한 계약: Apache

개발 언어: JavaScript, HTML/CSS

운영 체제: 크로스 platform

소스코드 주소 : https://gitee.com/pintuer/pintuer

Puzzle Pintuer.com : 국내 우수 HTML, CSS, JS 크로스스크린 반응형 오픈소스 프론트엔드 프레임워크로 최신 브라우저 기술을 활용하여 신속한 프런트엔드 개발 텍스트, 아이콘, 미디어, 표, 양식, 버튼, 메뉴, 그리드 시스템 등을 위한 스타일 툴킷 시스템으로, 리소스를 거의 차지하지 않습니다. Jigsaw를 사용하여 간단하고 우아한 프런트엔드를 빠르게 구축하세요. 휴대폰, 태블릿, 데스크톱 컴퓨터 및 기타 장치에 자동으로 적응하는 인터페이스는 프런트엔드 개발을 게임을 하는 것처럼 재미있고 쉽게 만듭니다.

Jigsaw 프런트엔드 프레임워크는 전통적인 CSS 프레임워크를 기반으로 HTML5, CSS3, JS 및 기타 기술 결합 애플리케이션을 추가하며 최신 브라우저 기술에 적용되며 이전 브라우저와 새로운 브라우저와 호환됩니다. 개발자는 프레임워크 파일만 프로젝트에 도입하면 신속한 공동 개발이 가능하고, 모바일 웹사이트와 PC 웹사이트를 동시에 구축하던 기존 상황을 바꾸고, 모든 디바이스에 대한 원스톱 대응을 달성하고, 크게 개선할 수 있습니다. 개발 효율성.

4. 경량 소재 디자인 프런트 엔드 프레임워크 MDUI

등급: 8.6; 컬렉션: 215

라이센스 계약: MIT

개발 언어: JavaScript, HTML/CSS

운영 체제: 크로스 플랫폼

소스 코드 주소: https://github.com/zdhxiong/mdui

MDUI는 경량 머티리얼 디자인 프런트 엔드 프레임워크로 머티리얼 디자인 문서에 따라 개발되었으며 머티리얼의 구성 요소를 1:1로 구현하려고 노력합니다. 설계.

다양한 테마 지원: MDUI에는 19가지 기본 색상, 16가지 강조 색상 및 야간 테마가 있습니다. 테마를 전환하려면 CSS 클래스를 추가하기만 하면 됩니다.

경량: 모든 테마를 포함하는 CSS 파일은 26.4KB 축소 + gzip이고 JavaScript 파일은 12KB 축소 + gzip으로 종속성이 없습니다.

반응형: 모바일 우선, 모든 화면에 적용 가능.

5. Win10 스타일 프런트엔드 반응형 UI 프레임워크 Win10-UI

등급: 8.5; 컬렉션: 170

라이센스 계약: SATA

개발 언어: JavaScript, HTML/CSS

운영 체제: 크로스 플랫폼

소스 코드 주소: https://github.com/yuri2peter/win10-ui

Win10-UI는 win10 스타일의 배경 UI 프레임워크입니다. 데스크톱 아이콘, 창 하위 페이지 관리, 시작 메뉴, 동적 타일 및 기타 구성 요소를 포함한 풍부한 win10 데스크톱 요소를 사용합니다. 주류 최신 브라우저 및 모바일 화면 크기와 호환되며 프런트 엔드 인터페이스의 신속한 개발에 적합합니다. 백엔드 관리 시스템.

Win10-UI는 전통적인 UI 프레임워크의 렌더링 디자인을 채택하고 복잡한 js 코드를 순서대로 기억합니다. html 구조만 적용하면 데스크탑 요소를 쉽게 렌더링할 수 있습니다. 동시에 적극적으로 호출되는 API도 유지되므로 고급 개발자가 UI의 세부 사항을 정의할 수 있습니다. 너무 많은 "규칙"을 정의하지 않습니다. CSS 및 JS를 사용하여 기능을 완전히 확장하고 고유한 백엔드 UI로 만들 수 있습니다.

6.노드 터미널 인터페이스 라이브러리 christian-contrib

등급: 8.5; 컬렉션: 125

승인 계약: MIT

개발 언어: JavaScript

운영 체제: 크로스 플랫폼

소스 코드 주소: https : //github.com/yaronn/blessed-contrib

blessed-contrib는 Node.js를 사용하여 터미널 애플리케이션 인터페이스를 구축하기 위한 라이브러리입니다.

7. React 및 Redux를 기반으로 하는 최신 콘텐츠 편집기인 ORY Editor

등급: 8.3; 컬렉션: 109

라이센스 계약: AGPL

개발 언어: JavaScript

운영 체제: 크로스 플랫폼

소스 코드 주소: https://github.com/ory/editor

ORY는 개발자 도구를 구축하고 유지 관리하는 회사입니다. ORY Editor는 React를 사용하여 작성된 스마트하고 확장 가능하며 현대적인 웹용 편집기("WYSIWYG")입니다. . contenteditable의 한계에 지쳤다면 이것은 좋은 선택이 될 것입니다.

ORY Editor는 Squarespace와 유사하게 웹사이트를 만드는 데 사용할 수 있지만 오프라인에서도 작동하며, 이를 사용하여 만든 사이트는 기기에 저장되며 자신만의 디자인과 플러그인을 만들 수 있습니다.

8. 모바일 애플리케이션 애니메이션 효과 프레임워크 Lottie

등급: 8.3; 컬렉션: 317

라이센스 계약: Apache

개발 언어: Java, Objective-C, JavaScript

운영 체제: Android

소스 코드 주소:

Android: https://github.com/airbnb/lottie-android

iOS: https://github.com/airbnb/lottie-ios

React 네이티브: https://github.com/airbnb /lottie-react-native

Lottie는 Airbnb에서 개발한 오픈 소스 도구로 네이티브 애플리케이션에 애니메이션 효과를 추가할 수 있습니다. Lottie는 현재 After Effects 애니메이션 특수 효과를 실시간으로 렌더링할 수 있는 iOS, Android 및 React Native 버전을 제공합니다.

현재 Lottie는 경로 트리밍, 마스킹, 덮기 및 기타 작업을 지원합니다. 자주 사용하는 항목을 더 빠르게 로드하기 위한 선택적 캐싱 메커니즘도 있습니다. 이 앱의 목표는 개발자와 애니메이터가 앱용 애니메이션을 보다 쉽게 제작하여 전반적인 상호작용 요소를 향상시킬 수 있도록 돕는 것입니다.

9. 테마 최적화 패키지 JQuery EasyUI 1.5.x Of Insdep Theme

등급: 8.3; 컬렉션 수: 101

라이센스 계약: GPL

개발 언어: JavaScript

운영 체제: 크로스 플랫폼

소스 코드 주소: https://gitee.com/weavors/JQuery-EasyUI-1.5.x-Of-Insdep-Theme

Insdep 테마는 Baidu 편집기와 자르기 도구가 포함된 EasyUI 1.5.x 기반의 무료 미화 테마 패키지입니다. , Highcharts, justgage, plupload 및 기타 타사 플러그인 미화 패치가 이 테마에 적용되었습니다. 그리고 일반적으로 사용되는 다양한 Jquery 플러그인이 미화되고 있습니다. 앞으로는 스타일을 아름답게 만들기 위해 더 많은 테마, 구성 요소 및 타사 플러그인이 제공될 예정입니다.

10. Ueditor를 기반으로 한 최신 리치 텍스트 편집기

등급: 8.3; 컬렉션: 503

승인 계약: MIT

개발 언어: JavaScript

운영 체제: 크로스 플랫폼

소스 코드 주소: https://gitee.com/notadd/neditor

Baidu 프론트엔드 팀은 많은 노력을 기울였고, 이제 Ueditor는 가장 유용한 중국어 리치 텍스트 편집기로 인정받고 있습니다. 하지만 시간이 지날수록 다들 바이두 에디터가 그다지 아름답지 않다는 느낌을 받게 됩니다. 그래서 우리는 Ueditor를 수정하여 현재 Neditor를 얻었습니다.

11. Vue.js 기반의 iView

등급: 8.3, 컬렉션: 475

승인 계약: MIT

개발 언어: HTML/CSS

운영 체제: 크로스 플랫폼

소스 코드 주소: https://gitee.com/icarusion/iview

iView는 Vue.js 기반의 UI 컴포넌트 라이브러리 세트로 주로 PC 인터페이스의 Middle, Back-end 제품을 서비스하고 있습니다.

기능

고품질, 풍부한 기능

친숙한 API, 자유롭고 유연한 공간 활용

단일 파일 Vue 컴포넌트 개발 모델 사용

npm + webpack + babel 기반으로 개발, ES2015 지원

12.Vue 2.0 구성 요소 라이브러리 요소

등급: 8.2; 컬렉션 수: 609

승인 계약: MIT

개발 언어: JavaScript

운영 체제: 크로스 플랫폼

소스 코드 주소: https:/ /github.com/ ElemeFE/element

Element는 개발자, 디자이너 및 제품 관리자를 위해 준비된 Vue 2.0 기반 구성 요소 라이브러리로, 웹 사이트를 빠르게 구성할 수 있도록 지원 디자인 리소스를 제공합니다. Ele.me의 프론트엔드 팀이 오픈소스로 제공합니다.

13.HTML5 크로스 스크린 프런트 엔드 프레임워크 Amaze UI

등급: 8.1; 컬렉션: 1213

라이센스 계약: MIT

개발 언어: JavaScript, HTML/CSS

운영 체제: 크로스 플랫폼

소스코드 주소: https://gitee.com/amazeui/amazeui

Amaze UI는 최첨단 국제 "컴포넌트 기반 개발" 및 "모바일 우선" 디자인 개념을 채택합니다. 풍부한 구성 요소를 기반으로 개발자는 출시 후 반년 만에 간단한 조립을 통해 HTML5 웹 애플리케이션을 빠르게 구축할 수 있습니다. Amaze UI는 현재 Github에서 거의 10,000명의 스타를 보유하고 있으며 전 세계 500,000명의 개발자에게 서비스를 제공하는 중국에서 가장 인기 있는 프런트 엔드 프레임워크가 되었습니다.

14. WeChat을 위해 특별히 설계된 UI 라이브러리

등급: 7.7; 컬렉션: 2002

라이센스 계약: MIT

개발 언어: JavaScript, HTML/CSS

운영 체제: 크로스 플랫폼

WeUI는 WeChat 공식 디자인 팀이 WeChat 모바일 웹 애플리케이션을 위해 특별히 디자인한 UI 라이브러리입니다.

WeUI는 WeChat의 기본 시각적 경험과 일치하는 기본 스타일 라이브러리로, WeChat 웹 개발에 맞춰 제작되었으며 사용자의 사용 인식을 더욱 통일시킬 수 있습니다. 버튼, 셀, 대화 상자, 토스트, 기사, 아이콘 등 다양한 요소가 포함되어 있습니다.

15. 대시보드 웹앱 템플릿 AdminLTE

등급: 7.6; 컬렉션: 136

라이센스 계약: MIT

개발 언어: JavaScript, HTML/CSS

소스 코드 주소: https://github.com/almasaeed2010/AdminLTE/

AdminLTE는 관리 대시보드 및 제어판을 위한 인기 있는 오픈 소스 WebApp 템플릿입니다. 반응형 HTML 템플릿인 Bootstrap 3을 기반으로 한 CSS 프레임워크입니다. 모든 Bootstrap 구성 요소를 활용하여 사용되는 대부분의 플러그인을 디자인하고 스타일을 지정하여 백엔드 애플리케이션으로 사용할 수 있는 일관된 사용자 인터페이스 디자인을 만듭니다. AdminLTE는 모듈식 설계를 기반으로 하며 쉽게 사용자 정의하고 그 위에 다시 만들 수 있습니다.

16. 웹 온라인 배포 시스템 도구 Walle

등급: 7.4; 컬렉션: 359

승인 계약: MIT

개발 언어: PHP, HTML/CSS

운영 체제: 크로스 플랫폼

Walle 간단한 구성, 완전한 기능, 원활한 인터페이스 및 즉시 사용 가능한 웹 배포 시스템 도구! git, svn 버전 관리를 지원하며 다양한 웹 코드 릴리스를 지원합니다. PHP, Python, JAVA 등의 코드 릴리스 및 롤백은 웹을 통해 한 번의 클릭으로 완료할 수 있습니다.

17. 웹사이트 관리 백엔드 템플릿 Charisma

등급: 7.4; 컬렉션 수: 1055

라이센스 계약: Apache

개발 언어: HTML/CSS

운영 체제: 크로스 플랫폼

Charisma 기반 Twitter Bootstrap 제작된 반응형 웹사이트 관리 배경 템플릿에는 9가지 아름다운 테마 세트가 포함되어 있습니다.

18. 오픈 소스 Kanban 관리 시스템 LibreBoard

등급: 7.4; 컬렉션: 380

라이센스 계약: MIT

개발 언어: JavaScript, HTML/CSS

운영 체제: 크로스 플랫폼

LibreBoard는 a 카드 기반 조직인 Kanban의 오픈 소스 구현입니다. LibreBoard는 팀 내에서 협업적인 커뮤니케이션을 달성하는 데 사용할 수 있습니다. LibreBoard는 Trello의 오픈 소스 버전으로 생각할 수 있습니다. LibreBoard는 Sandstorm 플랫폼에 대한 원클릭 설치와 검증된 Docker 이미지를 제공합니다.

위 내용은 프론트엔드 개발과 관련된 국내 인기 오픈소스 프로젝트 18개에 대한 간략한 소개입니다.