Panou de bord frumos și puternic: Ant Design Pro 2.0 a lansat și introduce Umi

După lansarea 1.0, Ant Design Pro a primit atenție și adopție extinsă în industrie. Numărul de stele de pe GitHub a crescut până la 11.686, iar sute de aplicații medii și de back-end alimentate de Ant Design Pro au ajuns de asemenea în Ant Financial.

Dezvoltarea 2.0 a fost în derulare în ultimele 8 luni. Cu ajutorul a 38 de contribuabili nemaipomeniți, am combinat împreună 600 de angajamente, o mulțime de funcții noi și o actualizare generală a arhitecturii. Acum, am anunțat cu mândrie Ant Design Pro 2.0. Mai exact, am adus patru pagini noi, mai multe machete care să îmbogățească scenariile de utilizare. Am modernizat schela de la roadhog la umi2 și am adăugat un sertar de configurare cool. Vino și vezi proiectul nostru aici:

  • Pagina principală: http://pro.ant.design/
  • Previzualizare tablou de bord: http://preview.pro.ant.design/
  • GitHub: http://github.com/ant-design/ant-design-pro

Pagini noi

Fiind cea mai influentă specificație de design web a districtului XiHu, o pagină elegantă, frumoasă și bine proiectată a fost întotdeauna cel mai mare avantaj al nostru. În V2, am adus și o serie de actualizări de pagini și optimizări, inclusiv:

  • Modal pas cu pas
  • Introducere de informații Modal
  • Centrul personal
  • Setari personale

Layout Aspect și temă nouă

În V2, avem o varietate de machete încorporate. Puteți combina o varietate de pagini pentru a satisface cerințele dvs. cu o configurație simplă. Va fi întotdeauna unul care îți place. Pentru a le face mai ușor să vadă mai rapid rezultatele, am dezvoltat un sertar de configurare interesant pentru schimbarea temei cu doar câteva comutări. După confirmarea cu stilurile dorite, puteți copia codul de setări și setați-le ca implicit. Schimbarea temei nu a fost niciodată atât de ușoară! Mai important, întregul proces este online și niciodată nu este necesar să reporniți schela. Relaxați-vă și bucurați-vă de o schimbare simplă și imediată a temei!

Ca Schela folosind umi

umi se bazează pe rutare, acceptă traseul convențional similar next.js și pe diverse funcții de rutare avansate, cum ar fi încărcarea la cerere la nivel de rutare. Apoi, cu un sistem complet de pluginuri, care acoperă fiecare ciclu de viață de la codul sursă la crearea produsului, umi este în măsură să suporte diferite extensii funcționale și nevoi de afaceri, în prezent am aproape 50+ pluginuri atât în ​​comunitate cât și în cadrul companiei.

umi este cadrul de bază front-end al Ant Financial și a servit sute sau mii de aplicații direct sau indirect, inclusiv Java, nod, aplicație mobilă, aplicație hibridă, aplicație de tip front-end pur, aplicație CMS și multe altele. umi a servit foarte bine utilizatorii noștri interni și speră că poate servi bine și utilizatorilor externi.

Are următoarele caracteristici:

  • În afara cutiei , reacție încorporată 、 reacție-router etc.
  • Next.js ca și convențiile complete de rutare prezentate, acceptă, de asemenea, rutarea configurată
  • System Sistem complet de pluginuri, care acoperă fiecare ciclu de viață de la codul sursă la producție
  • Performance De înaltă performanță, suport PWA, împărțirea codului la nivel de rută, etc. prin plugin
  • Susțineți exportul static, adaptați-vă la diverse medii, cum ar fi aplicația consolă, aplicația mobilă, ou, portofelul Alipay etc.
  • Start Pornire rapidă dev, suport activ dll și hard-source-webpack-plugin cu configurare
  • IE9 compatibil, bazat pe umi-plugin-polyfills
  • Suport TypeScript, inclusiv definiția d.ts și testul umi
  • Integration Integrare profundă cu dva, directorul de rață suport, încărcare automată a modelului, divizare de coduri, etc.

Support Suport de încărcare la cerere

Încărcarea la cerere devine super ușoară în V2. Efectuați următoarea configurație în babel-plugin-import:

{
    libraryName: 'ant-design-pro',
    libraryDirectory: 'lib',
    stil: adevarat,
    camel2DashComponentName: false,
  }

Puteți utiliza componente Ant Design Pro precum antd și vă recomandăm să utilizați această metodă pentru a reduce semnificativ dimensiunea pachetului dvs. de pachete.

import {Rezultat} din „ant-design-pro”;
ReactDOM.render (, mountNode);

Cele mai bune practici de internaționalizare

V2 oferă cele mai bune practici de internaționalizare bazate pe umi-plugin-locale. Trebuie doar să introduceți fișierul js corespunzător (cum ar fi en-US.js / zh-CN.js) în src / locales, iar funcțiile legate de internaționalizare vor fi disponibile în cod!

import {
  FormatMessage,
  setlocale,
  getLocale,
  FormattedMessage,
} din „umi / locale”;
export default () => {
  returnați 
}

Ce urmează

În viitor, vom acorda mai multă atenție performanței și ușurinței de utilizare a Ant Design Pro. Și cu ajutorul umi, vom încerca să facem o explorare în materializarea componentelor. În plus, vom continua să îmbunătățim documentația pentru a reduce costul de utilizare. Arătând mai ușor și ușor de utilizat a fost și va fi întotdeauna direcția noastră și vom continua să luptăm pentru asta.

Mulțumiri speciale

Mulțumesc tuturor contribuitorilor care au depus bug-uri, au deschis PR-uri, au răspuns la probleme, au scris documentație și multe altele! Mulțumiri speciale următorilor parteneri comunitari @ yoyo837 @xiaohuoni @zhangxiuling @kaoding și cu siguranță tuturor celor 38 de contribuabili care au deschis PR-uri pentru V2. Participarea ta a făcut ca pro V2 să devină o realitate.

Dacă întâmpinați probleme atunci când utilizați Ant Design Pro V2, nu ezitați să depuneți o nouă problemă pe GitHub.

Mulțumesc pentru timpul acordat. Prinde-l și instalează-l, încearcă-l!

În cele din urmă

Un alt lucru demn de menționat, echipa noastră lucrează la un nume de produs de colaborare a cunoștințelor 『语 雀』 (semnificațiile care pot vorbi de pasăre lark), publicăm și acest articol și versiunea chineză acolo unde puteți merge. Produsul este încă în versiune beta și nu este bun pentru utilizatorii englezi acum, pe care muncim din greu pentru a îmbunătăți continuarea.