search icon

Vue CLI

Vue CLI (Command Line Interface) bruges til større Vue-applikationer, hvis man ønsker at lave flere templates til single page applications med en router mm.

Installation

Vue CLI afvikles på NodeJS som derfor skal være installeret. Vue CLI installeres globalt med NPM (Node Package Manager)

npm i -g @vue/cli

Opret projekt

Navigér til mappen, hvor et projekt ønskes oprettet. Her oprettes projektet med

vue create first-project

Herefter får man en række valgmuligheder. Man vælger til / fra med space og går videre med enter. Til at starte med er valgt som følger

Vue CLI - Create
Manually valgt
Valg foretages med piletaster + space
Vue version 3.x vælges
Her vælges “in dedicated config files”
Da dette ikke er standarden hver gang vælges her n for nej
Her bruges NPM. Hvis man foretrække Facebooks Package manager, Yarn, kan man gøre dette

Herefter oprettes et projekt som ønsket og man kan starte projektet ved

cd first-proj
npm run serve

Nu kører en Vue Applikation på http://localhost:8080/.

Applikationen

Vue CLI har forberedt en applikation med alle de filer, der skal bruges for at komme i gang. Det kan virke overvældende med alle de mapper og filer, der er i et projekt, så her er en lille gennemgang.

node_modules

Har man arbejdet med NodeJS eller andet, der kører via NodeJS kender man formentlig til mappen node_modules. Her er alle dependencies og packages, der bruges i et NodeJS-projekt. I dette projekt er bl.a. Vue-biblioteket samt nogle af de dependencies, der blev valgt ved start som f.eks. Babel.

public

Her i er index.html som er entry point for en Vue app. Det er her applikationen afvikles fra.

src

Det er i src-mappen, at den HTML, CSS, JavaScript og Vue-kode, der bruges i et projekt skal bruges.

Her er også filen main.js, som er filen, hvor Vue starter hele appen. Da Vue blev indsat via CDN skulle man bruge Vue.createApp(). med Vue CLI bruges ES5+ syntaksen import til at importere Vue, så det kan laves som i main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

App.vue

App.vue er en template-fil, der er oprettet som standard når man opretter et nyt projekt via Vue CLI. Det er template-filer som denne man bruger i udviklingen af Vue-applikationer. De indeholder typisk 3 dele:

Templaten i <template>-tag, et objekt, der tilhører denne template, men minder om data-objektet i Vue via CDN og så indeholder den style-tag til CSS.

Ét svar til “Vue CLI”

  1. […] Hvis man ikke allerede har et Vue CLI-projekt man kan bruge i det følgende kan man følge guiden til at oprette et projekt i Vue CLI. […]

Skriv et svar

Verified by MonsterInsights