Vue Academy · Lektion

Installera Vue CLI

Installera och använd Vue CLI för att skapa nya projekt.

Lektion 1 av 313 steg

Installera Vue CLI är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 1 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 3 lektioner.

Vad är Vue CLI

Vue CLI är det klassiska kommandoradsverktyget för att skapa grundstrukturen till och hantera Vue-projekt.

Skapar projekt med genomtänkta standardinställningar
Hanterar byggkonfigurationen genom plugins
Bygger ovanpå webpack

Det var standardverktyget i många år, men moderna Vue föredrar numera Vite.

Installera Vue CLI globalt

Installera CLI globalt så att kommandot vue är tillgängligt överallt.

# Install globally with npm
npm install -g @vue/cli

# Verify the installation
vue --version
# @vue/cli 5.0.8

Skapa ett projekt

Använd vue create för att skapa grundstrukturen till ett nytt projekt. Du anger ett projektnamn.

# Create a new project
vue create my-project

# The CLI launches an interactive prompt

Välja förinställningar

CLI:t ber Dig välja en förinställning:

Default ger Babel och ESLint, vilket är den snabbaste vägen
Manually select features låter Dig lägga till Router, Vuex, TypeScript, testning med mera

Förinställningar kan sparas och återanvändas för framtida projekt.

Välja funktioner manuellt

När Du väljer manuellt kan Du aktivera eller inaktivera de funktioner Du vill använda.

# Example feature checklist
? Check the features needed for your project:
  (*) Babel
  ( ) TypeScript
  (*) Router
  (*) Vuex
  (*) CSS Pre-processors
  (*) Linter / Formatter

Köra projektet

När projektet har skapats skriver CLI:t ut kommandona för att starta appen.

# Move into the project
cd my-project

# Start the dev server
npm run serve

# App runs at http://localhost:8080

Vite gör entré

Vite är det moderna byggverktyget som har skapats av Vue-teamet.

Använder inbyggda ES-moduler för omedelbar uppstart
Blixtsnabb Hot Module Replacement
Mycket snabbare än den webpack-baserade Vue CLI

Vite är nu det rekommenderade verktyget för nya Vue-projekt.

Vite jämfört med Vue CLI

Så här skiljer sig verktygen åt:

Vue CLI använder webpack, har långsammare kallstart samt är moget och konfigurerbart
Vite använder esbuild och inbyggd ESM, startar nästan omedelbart och är standard framöver

Vue CLI är nu i underhållsläge. Föredra Vite om Du inte underhåller ett äldre projekt.

npm create vue@latest

Det officiella sättet att starta ett nytt Vite-baserat Vue-projekt är verktyget create-vue.

# Scaffold a Vite + Vue project
npm create vue@latest

# Prompts for name and features:
#   TypeScript, JSX, Vue Router, Pinia,
#   Vitest, ESLint, Prettier

Köra ett create-vue-projekt

create-vue använder Vites standardskript.

# After scaffolding
cd my-vue-app
npm install
npm run dev

# Dev server: http://localhost:5173

Vilket ska Du använda

Vägledning för valet:

Startar Du från grunden 2024 eller senare? Använd npm create vue@latest (Vite)
Underhåller Du ett äldre projekt som byggts med Vue CLI? Fortsätt använda det
Vill Du ha den snabbaste utvecklingsupplevelsen? Vite vinner

Snabbtest

Testa Dina kunskaper om val av Vue-verktyg.

Besvara frågan i den interaktiva lektionen

Sammanfattning: installation av Vue CLI

Du har lärt Dig om verktyg för att skapa Vue-projekt:

Vue CLI installeras med npm install -g @vue/cli
vue create skapar grundstrukturen med förinställningar
Vite är det moderna och snabba alternativet
npm create vue@latest är det rekommenderade moderna sättet att börja

Nästa steg: utforska den genererade projektstrukturen.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 42
Lektioner: 156

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Installera Vue CLI” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Installera Vue CLI”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 3 lektioner.

Vad lär jag mig i ”Installera Vue CLI”?

Installera och använd Vue CLI för att skapa nya projekt. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Vue Academy?

Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 3.

Hur lång tid tar lektionen ”Installera Vue CLI”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Vue Academy-lektionen?

Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Vue Academy