%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} ...
... \end{verbatim} \subsection*{App.vue} \begin{verbatim} ... \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}