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
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.
[…] 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. […]