Kaunis ja tehokas kojelauta: Ant Design Pro 2.0 julkaisi ja esittelee Umin

1.0 julkaisun jälkeen Ant Design Pro on saanut teollisuudessa laajaa huomiota ja omaksumista. Tähtien määrä GitHubissa on kasvanut koko 11 686: iin, ja samat Ant Design Pron käyttämät keskipitkän ja takaosan sovellukset ovat myös laskeutuneet Ant Financialin sisään.

2.0: n kehittäminen on ollut käynnissä viimeisen 8 kuukauden ajan. 38 mahtavan avustajan avulla naulaimme yhdessä 600 toimeksiantoa, runsaasti uusia ominaisuuksia ja yleisen arkkitehtuurin päivityksen. Nyt julkistimme ylpeänä Ant Design Pro 2.0: n. Erityisesti toimme neljä uutta sivua, useita asetteluja rikastuttaaksesi käyttötapahtumia. Päivitimme rakennustelineemme roadhogista umi2: ksi ja lisäsimme viileän asennuslaatikon. Tule katsomaan projektiamme täältä:

  • Kotisivu: http://pro.ant.design/
  • Hallintapaneelin esikatselu: http://preview.pro.ant.design/
  • GitHub: http://github.com/ant-design/ant-design-pro

Uudet sivut

XiHu-alueen vaikutusvaltaisimpana verkkosuunnittelueritelmänä tyylikäs, kaunis ja hyvin suunniteltu sivu on aina ollut suurin etumme. V2: ssa toimme myös sarjan sivupäivityksiä ja -optimointeja, mukaan lukien:

  • Vaiheittainen modaali
  • Tietojen syöttömodaali
  • Henkilökohtainen keskus
  • Henkilökohtaiset asetukset

Uusi asettelu ja teema

V2: ssa meillä on monenlaisia ​​ulkoasuja sisäänrakennettuna. Voit yhdistää erilaisia ​​sivuja tarpeitasi vastaavaksi yksinkertaisella kokoonpanolla. Aina on yksi pidät. Jotta kaikkien olisi helpompi nähdä tuloksia nopeammin, kehitimme hienon asennuslaatikon, jonka avulla voit vaihtaa teeman vain muutamalla vaihdella. Kun olet vahvistanut haluamallasi tyylillä, voit kopioida asetuskoodin ja asettaa ne oletusasetuksiin. Teeman vaihtaminen ei ollut koskaan niin helppoa! Vielä tärkeämpää on, että koko prosessi on verkossa, ja sinun ei tarvitse koskaan käynnistää uudelleen rakennustelineitä. Rentoudu vain ja nauti teeman vaihtamisesta helposti ja välitömästi!

Rakennustelineet umilla

umi perustuu reititykseen, tukee next.js-tyyppistä tavanomaista reititystä ja erilaisia ​​edistyneitä reititystoimintoja, kuten reititystason tilauslatausta. Sitten täydellisellä laajennusjärjestelmällä, joka kattaa jokaisen elinkaaren lähdekoodista tuotteen luomiseen, umi pystyy tukemaan erilaisia ​​toiminnallisia laajennuksia ja liiketoiminnan tarpeita, tällä hetkellä umilla on lähes 50+ laajennusta sekä yhteisössä että yrityksen sisällä.

umi on Ant Financialin peruskäyttöjärjestelmä, ja se on palvellut satoja tai tuhansia sovelluksia suoraan tai epäsuorasti, mukaan lukien Java, solmu, mobiilisovellus, Hybridi-sovellus, puhdas käyttöliittymäsovellus, CMS-sovellus ja paljon muuta. umi on palvellut sisäisiä käyttäjiämme erittäin hyvin ja toivoo voivansa palvella hyvin myös ulkoisia käyttäjiä.

Sillä on seuraavat ominaisuudet:

  • ulkopuolella , sisäänrakennettu reagoida 、 reagointireititin jne
  • Seuraava.js, kuten ja täysin varustetut reitityskäytännöt, tukevat myös konfiguroitua reititystä
  • Täydellinen laajennusjärjestelmä, joka kattaa jokaisen elinkaaren lähdekoodista tuotantoon
  • Suuri suorituskyky, tuki PWA: ta, reittitason koodin jakaminen jne. Laajennuksen kautta
  • Tukea staattista vientiä, sopeutua erilaisiin ympäristöihin, kuten konsoli-, mobiilisovellus, muna, Alipay-lompakko jne.
  • Nopea dev käynnistys, tuki mahdollistaa dll ja kova lähde-webpack-plugin kanssa config
  • Yhteensopiva IE9, joka perustuu umi-plugin-polyfills-täyttöihin
  • Tukityyppi, mukaan lukien d.ts-määritelmä ja umi-testi
  • Syvä integraatio dva: n kanssa, tuki-ankan hakemisto, mallin automaattinen lataaminen, koodin jakaminen jne

Lataustuki tilauksesta

Lataus tilauksesta on erittäin helppoa V2: ssa. Tee vain seuraavat asetukset babel-plugin-import -tuotteessa:

{
    libraryName: 'ant-design-pro',
    libraryDirectory: 'lib',
    tyyli: totta,
    camel2DashComponentName: false,
  }

Voit käyttää Ant Design Pro -komponentteja, kuten antd, ja suosittelemme, että käytät tätä menetelmää kimppupaketin koon pienentämiseen merkittävästi.

tuo {Tulos} tuotteesta 'ant-design-pro';
ReactDOM.render (, mountNode);

Best Kansainvälistymisen parhaat käytännöt

V2 tarjoaa kansainvälistymisen parhaat käytännöt, jotka perustuvat umi-plugin-locale-periaatteeseen. Sinun on laitettava vain vastaava js-tiedosto (kuten en-US.js / zh-CN.js) tiedostoon src / locales, ja kansainvälistymiseen liittyvät ominaisuudet ovat käytettävissä koodissa!

tuonti {
  formatMessage,
  setlocale,
  getLocale,
  FormattedMessage,
} lähteestä 'umi / locale';
vie oletus () => {
  return 
}

Mitä seuraavaksi

Jatkossa kiinnitämme enemmän huomiota Ant Design Pron suorituskykyyn ja helppokäyttöisyyteen. Ja umin avulla yritämme tehdä jonkin verran tutkimuksia komponenttien materialisoinnissa. Lisäksi jatkamme dokumentoinnin parantamista käyttökustannusten vähentämiseksi. Parempi näköinen ja helppokäyttöinen on ollut ja tulee olemaan aina suuntamme, ja jatkamme taistelua sen puolesta.

Erityinen kiitos

Kiitos jokaiselle avustajalle, joka jätti virheet, avasi PR: t, vastasi ongelmiin, kirjoitti dokumentaatiota ja paljon muuta! Erityiset kiitokset seuraaville yhteisökumppaneille @ yoyo837 @xiaohuoni @zhangxiuling @kaoding ja ehdottomasti kaikille 38 avustajalle, jotka ovat avanneet PR: t V2: lle. Osallistumisesi on tehnyt pro V2: n julkaisusta todellisuuden.

Jos sinulla on ongelmia Ant Design Pro V2: n käytössä, voit julkaista uuden numeron GitHubiin.

Kiitos ajastasi. Tartu ja asenna se, kokeile sitä!

Vihdoinkin

Toinen mainitsemisen arvoinen asia, tiimimme työskentelee tietämysyhteistyön tuotenimellä 『语 雀』 (merkitykset haikara lintu voi puhua), julkaisemme myös tämän artikkelin ja kiinalaisen version, josta voit käydä. Tuote on edelleen beeta, eikä se ole hyvä englannin käyttäjille. Pyrimme parantamaan toimintaamme.