Lær Vue: kod & byg
Lær Vue: kod & byg — Lær Vue.js ved at bygge komponenter på din telefon
Lær Vue: kod & byg er en gratis iOS- og Android-app, du kan komme i gang med, som lærer begyndere med lidt kendskab til HTML og JavaScript Vue.js, og udviklere, der skifter fra Options API til Composition API. Den indeholder 42 kurser og 156 lektioner – fra din første template til Pinia, Vue Router og Nuxt 3 – og single-file components kompileres på din enhed, så de 20 guidede projekter, missionerne og Vue Lab kan køre uden en server.
- Pris
- Gratis, Pro-opgradering
- Platforme
- iOS og Android
- Sprog
- 22
- Aldersgrænse
- 4+
- Version
- 82.6.0
- Kræver
- iOS 15.1 eller nyere
- App Store
- 3.0 ★ (2)
En komponent er lettere at forstå, når du først har ødelagt en.
Vue Lab giver dig hver dag en ødelagt komponent og beder dig finde fejlen, lader dig justere en komponents props med livekontroller og viser, hvordan state ændrer sig, når du klikker. Single-file components kompileres på telefonen, så forhåndsvisningen går i stykker og repareres lige foran dig, med et fejlkort, der fortæller, hvad der gik galt.
Hvad det er
Lær Vue: kod & byg er en gratis iOS- og Android-app, der lærer dig Vue.js gennem 42 kurser og 156 lektioner – fra template-syntaks og databinding via Composition API, Pinia, Vue Router og TypeScript til Nuxt 3, test med Vitest og full-stack-apps. Single-file components kompileres på enheden, så guidede projekter, kodningsmissioner og et praktisk Vue Lab kan køre på telefonen uden en server, mens en AI-mentor i Pro forklarer kode og fejl.
Inde i appen
Sådan ser det ud
Kurset
Dette dækker Vue-kurset
42 kurser og 156 lektioner fra appens egen kursusliste – fra den første template til server-rendering og produktionsmønstre.
Kom godt i gang med Vue.js
Introduktion til Vue.js, Vue CLI og projektstruktur, template-syntaks og databinding.
Reaktivitet og Composition API
Grundlæggende Vue 3 Composition API, script setup-syntaksen, reaktivitet og beregnede egenskaber samt Vue-direktiver.
Komponenter og formularer
Grundlæggende komponenter og kommunikation, slots, provide og inject, formularer og validering samt komponentens livscyklus.
Genbrug og finpudsning
Vue 3 composables, overgange og animationer, fejlhåndtering samt render-funktioner og JSX.
State og routing
State management med Pinia, Vuex, routing med Vue Router og avancerede router-mønstre samt håndtering af API'er og asynkrone data.
TypeScript, i18n og værktøjer
TypeScript med Vue 3, internationalisering, Storybook-integration samt implementering og vedligeholdelse af Vue-apps.
Nuxt 3, test og realtid
Server-side rendering med Nuxt 3, komponenttest med Vitest, GraphQL med Apollo samt realtidsapps med WebSockets.
Produktionsmønstre
Ydeevne, bedste praksis for sikkerhed, plugin-udvikling, udgivelse af et komponentbibliotek, progressive webapps og micro-frontends.
Sådan fungerer det
Sådan foregår Vue-læringen i appen
Hvert kursus har et niveau, og hver lektion efter det første gratis kursus begynder med en gratis forhåndsvisning, så du kan se, hvordan et emne ser ud, før du beslutter dig for at gå videre.
Start med Introduction to Vue.js
Det første kursus er gratis og begynder med, hvad Vue er, opsætning af miljøet og en Hello Vue-applikation. Kurserne er mærket fra A1 til C1, så det er tydeligt, hvor du skal starte, og hvad der kommer bagefter.
Byg og kør komponenter på telefonen
Redigér en single-file component, og se forhåndsvisningen med det samme. Guidede projekter udvider en app trin for trin, og App Studio lader dig bygge apps med flere skærme, en router og et store ud fra færdige blueprints.
Øv dig i Vue Lab
Find dagens fejl, genskab et måldesign i Style Lab, kappes mod uret i speed-build-dueller, eller skriv en Options API-komponent om i Composition-stil.
Hvad det indeholder
Dette følger med appen
42
Kurser, 156 lektioner
Fra template-syntaks og directives via lifecycle, slots, provide og inject samt composables til Nuxt 3, GraphQL, PWA'er og micro-frontends.
20
Guidede projekter
Udvid en app trin for trin med single-file components, der kompileres direkte på din enhed, og et fejlkort, når en forhåndsvisning går i stykker.
28
Kodningsmissioner
Øvelser fra lette til svære samt App Studio-blueprints til apps med flere skærme, en router og et store.
Lab
Vue Lab
En reaktivitetsinspektør, en daglig fejlfindingsjagt, 12 Style Lab-niveauer, speed-build-dueller, en dojo fra Options til Composition API og et My Components-bibliotek, som du kan dele som et billedkort.
Interview
Vue-interviewspørgsmål
Spørgsmål til jobsamtaler for front-end-udviklere med quizzer, flashcard-gennemgange og et cheat sheet, du kan åbne når som helst.
AI
AI-mentor (Pro)
Spørg om et koncept eller en fejl, få din kode forklaret, eller generér en tilpasset lektion om et emne, du vil studere.
Baggrund
Hvad er Vue.js, og hvad bør en begynder lære først?
Vue er et JavaScript-framework til at bygge interaktive webgrænseflader af komponenter: små genanvendelige dele, der hver især indeholder lidt template, logik og styling. Det tiltrækkende for begyndere er den blide indlæring, fordi du kan starte med almindelig HTML og lidt JavaScript og tilføje struktur undervejs. En fornuftig rækkefølge er templates og databinding, derefter reaktivitet og komponenter, så Composition API og først derefter routing, state management og server-rendering.
Reaktivitetideen i centrum
Du ændrer et stykke data, og skærmen, der afhænger af det, opdateres automatisk. Når du forstår, hvilke værdier der er reaktive, og hvad computed properties og watchers bidrager med, forsvinder det meste af den tidlige forvirring i Vue.
Options API og Composition APIto måder at skrive en komponent på
Den ældre Options API grupperer kode efter type, for eksempel data og metoder. Composition API med script setup grupperer den efter funktion og gør det nemt at lave genanvendelige composables. Mange tutorials og kodebaser bruger stadig begge dele, så det er en nyttig færdighed at kunne læse dem begge.
Pinia, Vuex og routerendet, en rigtig app tilføjer
Når en app har flere skærme, har den brug for routing til at bevæge sig mellem dem og et fælles store til data, som mere end én komponent bruger. Pinia er det aktuelle store til Vue, mens Vuex er det tidligere, som mange eksisterende projekter stadig bruger.
Nuxt og server-renderingnår søgning og hastighed er vigtigt
Nuxt bygger videre på Vue for at rendere sider på serveren, hvilket hjælper med den første indlæsning og synlighed i søgninger. Det er som regel et emne på andet trin, efter at komponenter, routing og state føles trygge.
Egnethed
Hvem det er til — og hvem det ikke er til
Det passer godt til dig, hvis du
- Kan lidt HTML og JavaScript og vil lære dit første framework
- Er på vej fra Options API til Composition API eller fra Vuex til Pinia
- Forbereder dig til en Vue.js-udviklersamtale eller dit første job inden for front-end
- Lærer bedre ved at reparere en ødelagt komponent end ved at læse om den
- Vil have korte sessioner, du kan nå på vej til eller fra arbejde
Det er ikke det rette værktøj, hvis du
- Har aldrig set HTML eller JavaScript før – begynd med et JavaScript-kursus
- Vil udgive en produktionsapp fra din telefon – en laptop er stadig stedet, hvor det foregår
- Forventer, at alt er gratis: Det første kursus og forhåndsvisningerne er gratis, mens Pro låser op for hele pensum
- Vil have officielt Vue.js-materiale – dette er en uafhængig læringsapp
Spørgsmål
Ofte stillede spørgsmål
Hvad er den bedste måde at lære Vue.js på en telefon?
Lær ved at køre komponenter i stedet for kun at læse om dem. Lær Vue: kod & byg kompilerer single-file-komponenter på enheden, så alle 20 guidede projekter, 28 missioner og Vue Lab kan køre på telefonen. Korte lektioner på tværs af 42 kurser tager dig fra template-syntaks til Nuxt 3, med et gratis introduktionskursus, du kan begynde med.
Underviser appen i Composition API og Pinia?
Ja. Lær Vue: kod & byg har kurser i det grundlæggende i Vue 3 Composition API, script setup-syntaksen, composables og state management med Pinia samt det ældre Vuex til eksisterende projekter. En Options to Composition API-dojo i Vue Lab lader dig omskrive klassiske komponenter i den moderne stil.
Hvad er forskellen på Options API og Composition API i Vue?
Options API grupperer en komponents kode efter type, f.eks. data, metoder og computed, mens Composition API med script setup grupperer den efter funktion og gør det nemt at genbruge composables. Lær Vue: kod & byg underviser i Composition API med script setup og inkluderer en Options to Composition API-dojo i Vue Lab, hvor du kan omskrive klassiske komponenter i den moderne stil.
Skal jeg kunne JavaScript, før jeg lærer Vue?
Det hjælper meget at kunne lidt HTML og JavaScript. Lær Vue: kod & byg er målrettet begyndere, der kan det grundlæggende og vil lære deres første framework, så appen forklarer Vue-begreber fra bunden, men underviser ikke i JavaScript. Hvis variabler og funktioner er nyt for dig, bør du begynde med et JavaScript-kursus.
Hvad er Vue Lab?
Vue Lab er øvelsesområdet i Lær Vue: kod & byg. Det indeholder en reaktivitetsinspektør, en daglig fejfjagt med en ødelagt komponent, Style Lab-niveauer, hvor du skal matche et måldesign med CSS, speed-build-dueller, en Options to Composition API-dojo og et My Components-bibliotek med det, du har bygget.
Dækker den Nuxt 3 og server-side rendering?
Ja. De avancerede kurser i Lær Vue: kod & byg dækker server-side rendering med Nuxt 3, SSR-streaming med Suspense og full-stack Vue med Fastify og autentificering samt komponenttest med Vitest og realtidsapps med WebSockets.
Hjælper den med Vue.js-jobsamtaler?
Ja. Lær Vue: kod & byg indeholder Vue-interviewspørgsmål til front-end-udviklerstillinger samt quizzer, flashcard-gennemgang og et snydeark. Kurserne bag dem dækker reaktivitet, livscyklus, composables og state management, som er almindelige emner til jobsamtaler.
Er Lær Vue: kod & byg gratis?
Den er gratis at downloade. Det første kursus, en forhåndsvisning af hver lektion, det første guidede projekt, den første mission, den daglige fejfjagt, tre Style Lab-niveauer, quizzer, interviewspørgsmål og snydearket er gratis, og gratisversionen viser annoncer. Pro låser op for hele pensum og hele laboratoriet, AI-mentoren og certifikateksamen og fjerner annoncer.
Er appen lavet af Vue.js-teamet?
Nej. Lær Vue: kod & byg er en uafhængig læringsapp og er ikke tilknyttet eller godkendt af Vue.js-projektet. Den underviser i Vue.js som et open source-framework gennem sine egne kurser og øvelser.
Er der et certifikat?
Ja. Når du består den afsluttende eksamen, som er en del af Pro, får du et gennemførelsesbevis. Det viser det arbejde, du har udført, og er ikke en akkrediteret kvalifikation, så det fungerer bedst sammen med komponenter og projekter, du kan forklare.
Hvilke platforme og sprog understøtter den?
Lær Vue: kod & byg kører på iPhone via App Store (iOS 15.1 eller nyere) og på Android via Google Play. Brugerfladen er tilgængelig på 22 sprog, og appen har aldersmærkningen 4+ i App Store.
Kom i gang
Byg din første Vue-komponent i dag
Gratis at komme i gang på iOS og Android på 22 sprog.
Mere fra CoddyKit
Tilgængelig på iOS og Android.