%Teilweise Erzeugt mit dem LaTeX-Generator: http://latex.sehnot.de

%Schriftgröße, Layout, Papierformat, Art des Dokumentes
\documentclass[10pt,oneside,a4paper]{scrartcl}

%Einstellungen der Seitenränder
\usepackage[left=2cm,right=2cm,top=1.5cm,bottom=1.5cm,includeheadfoot]{geometry}

%neue Rechtschreibung
\usepackage[ngerman]{babel}

%Umlaute ermöglichen
\usepackage[utf8]{inputenc}

%Gesamtseitenzahl
\usepackage{lastpage}

% Kopf- und Fußzeile
\usepackage[automark]{scrpage2}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}

% Mehrere Spalten
\usepackage{multicol}



%Kopfzeile
\ihead{Webentwicklung}
\chead{}
\ohead{http://kohnlehome.de/html/vue-cli.pdf}
\setheadsepline{0.5pt}

%Fußzeile
\setfootsepline{0.5pt}
\ifoot{Franz Kohnle}
\cfoot{Seite \thepage\ von  \pageref{LastPage}}
\ofoot{\today}

\pagestyle{scrheadings}

\begin{document}

% Überschrift 
\begin{center}
\LARGE % Schriftgröße
\bfseries % Fettdruck
\sffamily % Serifenlose Schrift
Vue CLI
\end{center}


Quelle: \href{https://cli.vuejs.org/guide/}{cli.vuejs.org/guide}

\section*{Installation}
\begin{verbatim}
npm install -g @vue/cli
vue --version
\end{verbatim}

\section*{Projekt erstellen}
\begin{verbatim}
vue create name-des-projekts
\end{verbatim}

\section*{GUI}
\begin{verbatim}
vue ui
\end{verbatim}

\section*{Dev-Server starten}
\begin{verbatim}
npm run serve
\end{verbatim}

\section*{Production-Ready bundle in \texttt{dist/} erstellen}
\begin{verbatim}
npm run build
\end{verbatim}

\section*{Verzeichnisstruktur}
\begin{multicols}{2}
\begin{verbatim}
name-des-projekts/
    |- public/
    |    |- index.html
    |
    |- src/
         |- assets/
         |    |- ... .png
         |
         |- components/
         |    |- ... .vue
         |
         |- App.vue
         |- main.js   
\end{verbatim}

\subsection*{index.html}
\begin{verbatim}
<html>
... 
    <div id="app"></div> 
... 
</html>  
\end{verbatim}

\subsection*{App.vue}
\begin{verbatim}
<template>
... 
</template>
<script>
export default {
  name: "App",
  components: {
    ... 
  },
};
</script>
<style> 
... 
</style> 
\end{verbatim}

\subsection*{main.js}
\begin{verbatim}
import { createApp } from 'vue'
import App from './App.vue'
    
createApp(App).mount('#app')

\end{verbatim}
\end{multicols}

\end{document}
