Lär dig Vue: koda & bygg
Lär dig Vue: koda & bygg — Lär dig Vue.js genom att bygga komponenter på din telefon
Lär dig Vue: koda & bygg är en gratis iOS- och Android-app som lär nybörjare med grundläggande kunskaper i HTML och JavaScript att använda Vue.js, och hjälper utvecklare att gå från Options API till Composition API. Appen innehåller 42 kurser och 156 lektioner, från din första template till Pinia, Vue Router och Nuxt 3, och single-file components kompileras på din enhet — så de 20 guidade projekten, uppdragen och Vue Lab körs utan server.
- Pris
- Gratis, uppgradering till Pro
- Plattformar
- iOS och Android
- Språk
- 22
- Åldersgräns
- 4+
- Version
- 82.6.0
- Kräver
- iOS 15.1 eller senare
- App Store
- 3.0 ★ (2)
En komponent blir lättare att förstå när du väl har haft sönder en.
Vue Lab ger dig varje dag en trasig komponent och ber dig hitta buggen, låter dig justera en komponents props med reglage i realtid och visar hur state förändras när du klickar. Single-file components kompileras på telefonen, så förhandsvisningen går sönder och repareras framför ögonen på dig, med ett felkort som förklarar vad som gick fel.
Vad det är
Lär dig Vue: koda & bygg är en gratis iOS- och Android-app som lär ut Vue.js genom 42 kurser och 156 lektioner, från template-syntax och databindning via Composition API, Pinia, Vue Router och TypeScript till Nuxt 3, testning med Vitest och fullstack-appar. Single-file components kompileras på enheten, så guidade projekt, koduppdrag och ett praktiskt Vue Lab körs på telefonen utan server, och en AI-mentor i Pro förklarar kod och fel.
I appen
Så här ser det ut
Kursen
Det här innehåller Vue-kursen
42 kurser och 156 lektioner från appens egen kurslista, från den första templaten till serverrendering och produktionsmönster.
Kom igång med Vue.js
Introduktion till Vue.js, Vue CLI och projektstruktur, templatesyntax och databindning.
Reaktivitet och Composition API
Grunderna i Vue 3 Composition API, syntaxen för script setup, reaktivitet och beräknade egenskaper samt Vue-direktiv.
Komponenter och formulär
Grunderna i komponenter och kommunikation, slots, provide och inject, formulär och validering samt komponenternas livscykel.
Återanvändning och finslipning
Vue 3 composables, övergångar och animationer, felhantering samt renderingsfunktioner och JSX.
Tillstånd och routing
Tillståndshantering med Pinia, Vuex, routing med Vue Router och avancerade routningsmönster samt hantering av API:er och asynkrona data.
TypeScript, i18n och verktyg
TypeScript med Vue 3, internationalisering, integration med Storybook samt driftsättning och underhåll av Vue-appar.
Nuxt 3, testning och realtid
Serverrendering med Nuxt 3, komponenttestning med Vitest, GraphQL med Apollo samt realtidsappar med WebSockets.
Produktionsmönster
Prestanda, bästa praxis för säkerhet, pluginutveckling, publicering av ett komponentbibliotek, progressiva webbappar och mikrofronter.
Så fungerar det
Så går det till att lära sig Vue i appen
Varje kurs har en nivå, och varje lektion efter den första kostnadsfria kursen börjar med en gratis förhandsvisning, så att du kan se hur ett ämne fungerar innan du bestämmer dig för att gå vidare.
Börja med Introduction to Vue.js
Den första kursen är gratis och börjar med vad Vue är, hur du konfigurerar miljön och hur du skapar en Hello Vue-applikation. Kurserna är märkta från A1 till C1, så det är tydligt var du ska börja och vad som kommer härnäst.
Bygg och kör komponenter på telefonen
Redigera en single-file component och förhandsvisa den direkt. Guidade projekt bygger ut en app steg för steg, och App Studio låter dig skapa appar med flera skärmar, router och store utifrån färdiga blueprints.
Öva i Vue Lab
Jaga dagens bugg, återskapa en måldesign i Style Lab, tävla mot klockan i speed-build-dueller eller skriv om en Options API-komponent i Composition-stil.
Det här ingår
Det här ingår i appen
42
Kurser, 156 lektioner
Från template-syntax och directives via lifecycle, slots, provide och inject samt composables till Nuxt 3, GraphQL, PWA:er och micro-frontends.
20
Guidade projekt
Bygg ut en app steg för steg med single-file components som kompileras direkt på din enhet och ett felkort när en förhandsvisning går sönder.
28
Koduppdrag
Övningar från enkla till svåra, plus App Studio-blueprints för appar med flera skärmar, router och store.
Lab
Vue Lab
En inspektör för reaktivitet, en daglig buggjakt, 12 Style Lab-nivåer, speed-build-dueller, en dojo för Options till Composition API och ett My Components-bibliotek som du kan dela som ett bildkort.
Intervju
Frågor om Vue för intervjuer
Frågor för intervjuer för front-end-utvecklare, med quiz, flashcard-repetitioner och ett fuskblad som du kan öppna när som helst.
AI
AI-mentor (Pro)
Fråga om ett koncept eller ett fel, få din kod förklarad eller skapa en anpassad lektion om vilket ämne du vill studera.
Bakgrund
Vad är Vue.js och vad bör en nybörjare lära sig först?
Vue är ett JavaScript-ramverk för att bygga interaktiva webbgränssnitt av komponenter: små, återanvändbara delar som var och en innehåller lite template, logik och stil. Det som gör Vue tilltalande för nybörjare är den mjuka starten: du kan börja med vanlig HTML och lite JavaScript och lägga till struktur allt eftersom. En bra ordning är templates och databindning, sedan reaktivitet och komponenter, därefter Composition API och först senare routing, state management och rendering på servern.
Reaktivitetidén i centrum
Du ändrar en del av datan och skärmen som beror på den uppdateras av sig själv. När du förstår vilka värden som är reaktiva och vad computed properties och watchers tillför försvinner det mesta av den tidiga förvirringen i Vue.
Options API och Composition APItvå sätt att skriva en komponent
Det äldre Options API grupperar kod efter typ, till exempel data och methods. Composition API med script setup grupperar den efter funktion och gör det enkelt att skapa återanvändbara composables. Många guider och kodbaser använder fortfarande båda, så det är en användbar färdighet att kunna läsa endera.
Pinia, Vuex och routernvad en riktig app behöver
När en app har flera skärmar behöver den routing för att förflytta sig mellan dem och en gemensam store för data som används av mer än en komponent. Pinia är den aktuella store-lösningen för Vue, medan Vuex är den tidigare som fortfarande finns i många befintliga projekt.
Nuxt och rendering på servernnär sökbarhet och hastighet spelar roll
Nuxt bygger vidare på Vue för att rendera sidor på servern, vilket förbättrar den första laddningen och synligheten i sökresultat. Det brukar vara ett ämne för nästa steg, efter att komponenter, routing och state känns bekväma.
Passar
Vem den är till för – och vem den inte är till för
Passar bra om du
- Kan lite HTML och JavaScript och vill lära dig ditt första ramverk
- Är på väg från Options API till Composition API eller från Vuex till Pinia
- Förbereder dig för en intervju för Vue.js-utvecklare eller ditt första jobb inom frontend
- Lär dig bättre genom att laga en trasig komponent än genom att läsa om en
- Vill ha korta sessioner som får plats under en pendling
Inte rätt verktyg om du
- Har aldrig sett HTML eller JavaScript – börja med en JavaScript-kurs först
- Vill lansera en produktionsapp från mobilen – en laptop är fortfarande platsen där det sker
- Förväntar dig att allt ska vara gratis: den första kursen och förhandsvisningarna är kostnadsfria, medan Pro låser upp hela kursplanen
- Vill ha officiellt Vue.js-material – det här är en fristående utbildningsapp
Frågor
Vanliga frågor
Vilket är det bästa sättet att lära sig Vue.js på en telefon?
Lär dig genom att köra komponenter i stället för att bara läsa om dem. Lär dig Vue: koda & bygg kompilerar single-file components på enheten, så appens 20 guidade projekt, 28 uppdrag och Vue Lab körs direkt på telefonen. Korta lektioner i 42 kurser tar dig från templatesyntax till Nuxt 3, med en kostnadsfri första kurs som start.
Lär appen ut Composition API och Pinia?
Ja. Lär dig Vue: koda & bygg har kurser om grunderna i Vue 3 Composition API, syntaxen för script setup, composables och tillståndshantering med Pinia, samt det äldre Vuex för befintliga projekt. En dojo för Options till Composition API i Vue Lab låter dig skriva om klassiska komponenter med den moderna stilen.
Vad är skillnaden mellan Options API och Composition API i Vue?
Options API grupperar en komponents kod efter typ, till exempel data, metoder och computed, medan Composition API med script setup grupperar den efter funktion och gör det enkelt att återanvända composables. Lär dig Vue: koda & bygg lär ut Composition API med script setup och innehåller en dojo för Options till Composition API i Vue Lab, där du kan skriva om klassiska komponenter med den moderna stilen.
Behöver jag kunna JavaScript innan jag lär mig Vue?
Lite HTML och JavaScript hjälper mycket. Lär dig Vue: koda & bygg riktar sig till nybörjare som kan grunderna och vill lära sig sitt första ramverk, så appen förklarar Vue-koncept från början men lär inte ut JavaScript i sig. Om variabler och funktioner är nya för dig bör du börja med en JavaScript-kurs.
Vad är Vue Lab?
Vue Lab är övningsområdet i Lär dig Vue: koda & bygg. Där finns en inspektör för reaktivitet, en daglig buggrunda med en trasig komponent, nivåer i Style Lab där du återskapar en mål-design med CSS, snabbbyggardueller, en dojo för Options till Composition API och ett My Components-bibliotek med det du har byggt.
Tar den upp Nuxt 3 och serverrendering?
Ja. De avancerade kurserna i Lär dig Vue: koda & bygg tar upp serverrendering med Nuxt 3, SSR-strömning med Suspense och fullstack-Vue med Fastify och autentisering, tillsammans med komponenttestning med Vitest och realtidsappar med WebSockets.
Hjälper appen mig inför Vue.js-intervjuer?
Ja. Lär dig Vue: koda & bygg innehåller Vue-intervjufrågor för roller som frontendutvecklare, tillsammans med quiz, repetitionssessioner med flashcards och ett fusklapp. Kurserna bakom detta tar upp reaktivitet, livscykel, composables och tillståndshantering, som är vanliga intervjuämnen.
Är Lär dig Vue: koda & bygg gratis?
Det är gratis att ladda ner. Den första kursen, en förhandsvisning av varje lektion, det första guidade projektet, det första uppdraget, den dagliga buggrundan, tre nivåer i Style Lab, quiz, intervjufrågor och fusklappen är kostnadsfria, och gratisversionen visar annonser. Pro låser upp hela kursplanen och labbet, AI-mentorn och certifieringsprovet samt tar bort annonserna.
Är appen skapad av Vue.js-teamet?
Nej. Lär dig Vue: koda & bygg är en fristående utbildningsapp och är inte knuten till eller godkänd av Vue.js-projektet. Den lär ut Vue.js som ett ramverk med öppen källkod genom sina egna kurser och övningar.
Finns det ett certifikat?
Ja. När du klarar slutprovet, som ingår i Pro, får du ett intyg på att du har slutfört kursen. Det visar vilket arbete du har gjort och är ingen ackrediterad kvalifikation, så det fungerar bäst tillsammans med komponenter och projekt som du kan förklara.
Vilka plattformar och språk stöder appen?
Lär dig Vue: koda & bygg fungerar på iPhone via App Store (iOS 15.1 eller senare) och på Android via Google Play. Gränssnittet finns på 22 språk och appen har åldersklassningen 4+ på App Store.
Kom igång
Bygg din första Vue-komponent i dag
Kom igång gratis på iOS och Android, på 22 språk.
Mer från CoddyKit
Tillgänglig på iOS och Android.