Som du vet kommer Vue 3 med en ny funksjon kalt Composition API, og jeg antar at vi på dette tidspunktet vet om det, men hvis du vil teste en slik funksjon er det noen Vue Plugins som lar deg begynne å bruke den akkurat nå.
I dette eksemplet skal vi bruke følgende verktøy:
- Vue 2.6.10
- VueCLI 4.0.5
- TypeScript 3.5.3
- @vue/composition-api
- Din favorittkoderedigerer (min er VS-kode ❤)
La oss begynne med denne opplæringen.
Sett opp prosjektet
I tilfelle du ikke har VueCLI installert, fortsatte vi å bruke neste kommando:
npm i -g @vue/cli
Dette vil installere CLI vi bruker i denne opplæringen, for å sjekke om du har den installert bruk:
vue --version or vue -V
Dette kan komme tilbake med den siste versjonen du har, i mitt tilfelle er:4.0.5
Nå som vi har CLI installert, gå til katalogen du ønsker og utfør neste kommando:
vue create <give_any_name_you_want>
Dette vil starte opprettelsen av prosjektet, men før det er ferdig må vi velge noen få alternativer.
Rett etter at vi har skrevet inn kommandoen, vil CLI spørre oss hvilken forhåndsinnstilling vi vil bruke, velg Velg funksjoner manuelt og trykk Enter.
Etter det vil du vise en meny med noen alternativer, vi kan velge å trykke mellomromstasten de neste alternativene og trykk Enter:
Bruke komponentsyntaks i klassestil? (J/n) n
I følge Vue-dokumentet for Typescript, anbefaler reamen å bruke Vue.extend-metoden i stedet for denne, så vi velger Nei
Bruker du Babel sammen med TypeScript? Y
Vi må transpilere koden vår for å fungere i hvilken som helst nettleser
Velg en linter-/formateringskonfigurasjon :Velg den du foretrekker, i mitt tilfelle:ESLint + Standard, men vær så snill, ikke velg TSLint, den er utdatert! (https://medium.com/palantir/tslint-in-2019-1a144c2317a9).
Ytterligere lofunksjoner:
Lo ved lagre
Plassere konfigurasjon for Babel, Eslint osv.?
I dedikerte konfigurasjonsfiler
Og hvis du vil lagre oppsettet, trykk Y og gi det et navn, nå kan vi vente til CLI er ferdig med å installere alt. Etter at CLI er ferdig med å flytte inn i mappen, rett før vi begynner å kode, trenger vi noen flere npm-avhengigheter, la oss gå videre med:
npm i -S axios @vue/composition-api
Etter at installasjonen er ferdig, er vi klare til å starte koden!
I neste del forbereder og koder vi grensesnittet og tjenesten som skal brukes i Vue-appen vår, så vær klar til å kode!