Opi Vue: koodaa & luo
Opi Vue: koodaa & luo — Opi Vue.js:ää rakentamalla komponentteja puhelimellasi
Opi Vue: koodaa & luo on ilmaiseksi aloitettava iOS- ja Android-sovellus, joka opettaa Vue.js:ää aloittelijoille, jotka tuntevat hieman HTML:ää ja JavaScriptiä, sekä kehittäjille, jotka siirtyvät Options API:sta Composition API:in. Sovelluksessa on 42 kurssia ja 156 oppituntia ensimmäisestä templaatistasi Piniaan, Vue Routeriin ja Nuxt 3:een asti, ja single-file-komponentit käännetään laitteellasi — joten 20 ohjattua projektia, tehtävät ja Vue Lab toimivat ilman palvelinta.
- Hinta
- Ilmainen, Pro-päivitys
- Alustat
- iOS ja Android
- Kielet
- 22
- Ikäraja
- 4+
- Versio
- 82.6.0
- Vaatimukset
- iOS 15.1 tai uudempi
- App Store
- 3.0 ★ (2)
Komponentti on helpompi ymmärtää, kun olet ensin rikkonut sellaisen.
Vue Lab antaa sinulle joka päivä rikkinäisen komponentin ja pyytää etsimään bugin, voit säätää komponentin props-arvoja reaaliaikaisilla säätimillä ja näet, miten tila muuttuu napsauttaessasi. Single-file-komponentit käännetään puhelimessa, joten esikatselu rikkoutuu ja korjaantuu silmiesi edessä, ja virhekortti kertoo, mikä meni vikaan.
Mikä se on
Opi Vue: koodaa & luo on ilmainen iOS- ja Android-sovellus, joka opettaa Vue.js:ää 42 kurssin ja 156 oppitunnin avulla template-syntaksista ja data bindingista Composition API:in, Piniaan, Vue Routeriin ja TypeScriptiin sekä Nuxt 3:een, Vitest-testaukseen ja full-stack-sovelluksiin asti. Single-file-komponentit käännetään laitteella, joten ohjatut projektit, koodaustehtävät ja käytännönläheinen Vue Lab toimivat puhelimessa ilman palvelinta, ja Pron AI-mentori selittää koodin ja virheet.
Sovelluksen sisältö
Miltä se näyttää
Kurssi
Mitä Vue-kurssi sisältää
42 kurssia ja 156 oppituntia sovelluksen omasta kurssivalikoimasta aina ensimmäisestä templatesta palvelinrenderöintiin ja tuotantokäytäntöihin.
Aloitus Vue.js:n parissa
Introduction to Vue.js, Vue CLI ja projektin rakenne, template-syntaksi ja datan sidonta.
Reaktiivisuus ja Composition API
Vue 3 Composition API:n perusteet, script setup -syntaksi, reaktiivisuus ja computed-ominaisuudet sekä Vue-direktiivit.
Komponentit ja lomakkeet
Komponenttien perusteet ja viestintä, slotit, provide ja inject, lomakkeet ja validointi sekä komponentin elinkaari.
Uudelleenkäyttö ja viimeistely
Vue 3 -composablet, siirtymät ja animaatiot, virheenkäsittely sekä renderöintifunktiot ja JSX.
Tila ja reititys
Pinia-tilanhallinta, Vuex, reititys Vue Routerilla ja edistyneet reititysmallit sekä API-rajapintojen ja asynkronisen datan käsittely.
TypeScript, i18n ja työkalut
TypeScript Vue 3:n kanssa, kansainvälistäminen, Storybook-integraatio sekä Vue-sovellusten käyttöönotto ja ylläpito.
Nuxt 3, testaus ja reaaliaikaisuus
Palvelinpuolen renderöinti Nuxt 3:lla, komponenttien testaus Vitestillä, GraphQL Apollolla sekä reaaliaikaiset sovellukset WebSockets-yhteyksillä.
Tuotantokäytännöt
Suorituskyky, tietoturvan parhaat käytännöt, pluginien kehittäminen, komponenttikirjaston julkaiseminen, progressiiviset web-sovellukset ja mikrofrontendit.
Miten se toimii
Miten Vuen oppiminen etenee sovelluksessa
Jokainen kurssi on tasoluokiteltu, ja jokainen ilmaisen ensimmäisen kurssin jälkeinen oppitunti alkaa ilmaisella esikatselulla, joten näet, millainen aihe on, ennen kuin päätät jatkaa.
Aloita kurssilla Introduction to Vue.js
Ensimmäinen kurssi on ilmainen, ja se alkaa Vuen perusteista, ympäristön käyttöönotosta ja Hello Vue -sovelluksesta. Kurssien tasot on merkitty A1:stä C1:een, joten tiedät helposti, mistä aloittaa ja mitä opiskella seuraavaksi.
Rakenna ja suorita komponentteja puhelimella
Muokkaa single-file-komponenttia ja esikatsele sitä saman tien. Ohjatuissa projekteissa sovellus kasvaa askel askeleelta, ja App Studio -työkalulla voit rakentaa usean näkymän sovelluksia, joissa on reititin ja store, valmiiden pohjien avulla.
Harjoittele Vue Labissa
Etsi päivän bugi, jäljittele tavoitemallia Style Labissa, kisaa aikaa vastaan speed-build-kaksintaisteluissa tai kirjoita Options API -komponentti uudelleen Composition-tyyliin.
Mitä se sisältää
Mitä sovellus sisältää
42
Kurssia, 156 oppituntia
Template-syntaksista ja direktiiveistä elinkaareen, slotteihin, provideen ja injectiin sekä composableihin, aina Nuxt 3:een, GraphQL:ään, PWA-sovelluksiin ja micro-frontend-ratkaisuihin asti.
20
Ohjattua projektia
Kasvata sovellusta askel askeleelta single-file-komponenteilla, jotka käännetään suoraan laitteellasi, sekä virhekortilla, joka ilmestyy esikatselun rikkoutuessa.
28
Koodaustehtävää
Harjoituksia helpoista haastaviin sekä App Studio -pohjia usean näkymän sovelluksiin, joissa on reititin ja store.
Lab
Vue Lab
Reaktiivisuuden tarkastelutyökalu, päivittäinen bugijahti, 12 Style Lab -tasoa, speed-build-kaksintaisteluita, Options API -komponenttien muuntamiseen Composition API -tyyliin tarkoitettu dojo sekä My Components -kirjasto, josta voit jakaa komponentin kuvakorttina.
Haastattelu
Vue-haastattelukysymykset
Kysymyksiä front-end-kehittäjän työhaastatteluihin sekä visoja, muistikorttien kertaussessioita ja lunttilappu, jonka voit avata milloin tahansa.
AI
AI-mentori (Pro)
Kysy konseptista tai virheestä, pyydä koodillesi selitys tai luo mukautettu oppitunti mistä tahansa aiheesta, jota haluat opiskella.
Taustaa
Mikä Vue.js on, ja mitä aloittelijan kannattaa oppia ensin?
Vue on JavaScript-kehys interaktiivisten verkkokäyttöliittymien rakentamiseen komponenteista: pienistä, uudelleenkäytettävistä osista, joilla kullakin on oma osuutensa templaatista, logiikasta ja tyylistä. Sen etuna aloittelijoille on helppo aloituskynnys: voit aloittaa tavallisella HTML:llä ja pienellä määrällä JavaScriptiä ja lisätä rakennetta vähitellen. Järkevä etenemisjärjestys on template- ja data binding -perusteet, sitten reaktiivisuus ja komponentit, sen jälkeen Composition API ja vasta lopuksi reititys, tilanhallinta ja palvelimella renderöinti.
Reaktiivisuuskaiken keskiössä
Muutat yhtä data-arvoa, ja siitä riippuva näyttö päivittyy itsestään. Kun ymmärrät, mitkä arvot ovat reaktiivisia ja mitä computed properties ja watcherit tuovat mukanaan, suurin osa Vuen alkuvaiheen hämmennyksestä katoaa.
Options API ja Composition APIkaksi tapaa kirjoittaa komponentti
Vanhemmassa Options API:ssa koodi ryhmitellään tyypin mukaan, esimerkiksi dataan ja metodeihin. Script setupin kanssa käytettävä Composition API ryhmittelee koodin ominaisuuksien mukaan ja tekee uudelleenkäytettävistä composableista helppoja. Monet tutoriaalit ja koodipohjat käyttävät yhä kumpaakin, joten molempien lukeminen on hyödyllinen taito.
Pinia, Vuex ja reititinmitä oikea sovellus lisää
Kun sovelluksessa on useita näkymiä, se tarvitsee reitityksen niiden välillä liikkumiseen sekä jaetun storen tietoja varten, joita useampi kuin yksi komponentti käyttää. Pinia on nykyinen Vue-store, ja Vuex on aiempi vaihtoehto, joka on yhä käytössä monissa olemassa olevissa projekteissa.
Nuxt ja palvelimella renderöintikun haku ja nopeus ovat tärkeitä
Nuxt rakentuu Vuen päälle ja renderöi sivut palvelimella, mikä nopeuttaa ensimmäistä latausta ja parantaa näkyvyyttä hakutuloksissa. Aiheeseen siirrytään yleensä toisessa vaiheessa, kun komponentit, reititys ja tila alkavat tuntua tutuilta.
Sopivuus
Kenelle se sopii – ja kenelle ei
Se sopii sinulle, jos
- Osaat hieman HTML:ää ja JavaScriptiä ja haluat opetella ensimmäisen frameworkisi
- Olet siirtymässä Options API:sta Composition API:in tai Vuexistä Piniaan
- Valmistaudut Vue.js-kehittäjän työhaastatteluun tai ensimmäiseen front-end-työpaikkaasi
- Opit paremmin korjaamalla rikkinäisen komponentin kuin lukemalla siitä
- Haluat lyhyitä oppitunteja, jotka sopivat työmatkalle
Se ei ole oikea työkalu sinulle, jos
- Et ole koskaan nähnyt HTML:ää tai JavaScriptiä — aloita ensin JavaScript-kurssilla
- Haluat julkaista tuotantosovelluksen puhelimellasi — kannettava tietokone on silti paikka, jossa se tehdään
- Odotat kaiken olevan ilmaista: ensimmäinen kurssi ja esikatselut ovat ilmaisia, ja Pro avaa koko opetussisällön
- Haluat Vue.js:n virallista materiaalia — tämä on itsenäinen oppimissovellus
Kysymykset
Usein kysytyt kysymykset
Mikä on paras tapa oppia Vue.js:ää puhelimella?
Opettele suorittamalla komponentteja sen sijaan, että vain lukisit niistä. Opi Vue: koodaa & luo kääntää yksitiedostokomponentit laitteella, joten sen 20 ohjattua projektia, 28 tehtävää ja Vue Lab toimivat kaikki puhelimella. 42 kurssin lyhyet oppitunnit vievät sinut template-syntaksista Nuxt 3:een, ja aloittamista helpottaa ilmainen ensimmäinen kurssi.
Opettaako sovellus Composition API:n ja Pinian?
Kyllä. Opi Vue: koodaa & luo sisältää kurssit Vue 3 Composition API:n perusteista, script setup -syntaksista, composableista ja Pinia-tilanhallinnasta sekä vanhemmasta Vuexistä olemassa olevia projekteja varten. Vue Labin Options to Composition API -dojo auttaa kirjoittamaan klassiset komponentit uudelleen modernilla tyylillä.
Mitä eroa Vue:n Options API:lla ja Composition API:lla on?
Options API ryhmittelee komponentin koodin tyypin mukaan, kuten dataan, metodeihin ja computed-ominaisuuksiin, kun taas Composition API script setup -syntaksin kanssa ryhmittelee koodin toiminnallisuuden mukaan ja tekee uudelleenkäytettävistä composableista helppoja. Opi Vue: koodaa & luo opettaa Composition API:n käyttöä script setup -syntaksilla ja sisältää Vue Labissa Options to Composition API -dojon klassisten komponenttien kirjoittamiseen uudelleen modernilla tyylillä.
Pitääkö JavaScript osata ennen Vuen opiskelua?
HTML:n ja JavaScriptin perusteiden tuntemisesta on paljon hyötyä. Opi Vue: koodaa & luo on suunnattu aloittelijoille, jotka osaavat perusteet ja haluavat opetella ensimmäisen frameworkinsa, joten se selittää Vuen käsitteet alusta alkaen mutta ei opeta JavaScriptiä. Jos muuttujat ja funktiot ovat sinulle uusia, aloita ensin JavaScript-kurssilla.
Mikä on Vue Lab?
Vue Lab on Opi Vue: koodaa & luoin harjoittelualue. Se sisältää reaktiivisuuden tarkastelutyökalun, päivittäisen bugijahdin rikkinäisellä komponentilla, Style Lab -tasoja, joissa jäljittelet kohdemallia CSS:llä, nopeusrakennushaasteita, Options to Composition API -dojon sekä My Components -kirjaston rakentamistasi komponenteista.
Käsitelläänkö siinä Nuxt 3:a ja palvelinpuolen renderöintiä?
Kyllä. Opi Vue: koodaa & luoin edistyneet kurssit käsittelevät palvelinpuolen renderöintiä Nuxt 3:lla, SSR-suoratoistoa Suspensen avulla ja täyden pinon Vue-kehitystä Fastifyn ja autentikoinnin kanssa sekä komponenttien testausta Vitestillä ja reaaliaikaisia sovelluksia WebSockets-yhteyksillä.
Auttaako se Vue.js-työhaastatteluissa?
Kyllä. Opi Vue: koodaa & luo sisältää Vue-haastattelukysymyksiä front-end-kehittäjän rooleihin sekä tietovisoja, muistikorttien kertauskertoja ja lunttilapun. Niiden taustalla olevat kurssit käsittelevät reaktiivisuutta, elinkaarta, composableja ja tilanhallintaa, jotka ovat yleisiä haastatteluaiheita.
Onko Opi Vue: koodaa & luo ilmainen?
Sen voi ladata ilmaiseksi. Ensimmäinen kurssi, jokaisen oppitunnin esikatselu, ensimmäinen ohjattu projekti, ensimmäinen tehtävä, päivittäinen bugijahti, kolme Style Lab -tasoa, tietovisat, haastattelukysymykset ja lunttilappu ovat ilmaisia, ja ilmaisversio näyttää mainoksia. Pro avaa koko opetussisällön ja laboratorion, tekoälymentor in sekä sertifikaattikokeen ja poistaa mainokset.
Onko sovelluksen tehnyt Vue.js-tiimi?
Ei. Opi Vue: koodaa & luo on itsenäinen oppimissovellus, eikä sillä ole yhteyttä Vue.js-projektiin tai sen hyväksyntää. Se opettaa Vue.js:ää avoimen lähdekoodin frameworkina omilla kursseillaan ja harjoituksillaan.
Onko siinä sertifikaattia?
Kyllä. Prohon kuuluva loppukokeen läpäiseminen antaa sinulle suorittamistodistuksen. Se osoittaa tekemäsi työn, eikä ole akkreditoitu pätevyys, joten se toimii parhaiten sellaisten komponenttien ja projektien rinnalla, jotka osaat esitellä.
Mitä alustoja ja kieliä se tukee?
Opi Vue: koodaa & luo toimii iPhonella App Storen kautta (iOS 15.1 tai uudempi) ja Androidilla Google Playn kautta. Käyttöliittymä on saatavilla 22 kielellä, ja sovelluksen ikäraja on App Storessa 4+.
Aloita
Rakenna ensimmäinen Vue-komponenttisi tänään
Aloita ilmaiseksi iOS- ja Android-laitteilla 22 kielellä.
Lisää CoddyKitilta
Saatavilla alustoilla iOS ja Android.