{"id":412,"date":"2021-10-24T12:02:10","date_gmt":"2021-10-24T10:02:10","guid":{"rendered":"https:\/\/nissel.it\/?p=412"},"modified":"2021-10-24T20:43:33","modified_gmt":"2021-10-24T18:43:33","slug":"teil-2-erstes-vue-js-projekt-als-vorbereitung-fuer-eine-rest-ui","status":"publish","type":"post","link":"https:\/\/nissel.it\/index.php\/2021\/10\/24\/teil-2-erstes-vue-js-projekt-als-vorbereitung-fuer-eine-rest-ui\/","title":{"rendered":"Teil 2: Erstes Vue.js Projekt als Vorbereitung f\u00fcr eine REST UI"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Motivation<\/h2>\n\n\n\n<p>Im Artikel <a href=\"https:\/\/nissel.it\/index.php\/2021\/10\/17\/teil-1-rest-service-mit-spring-boot-2-5-und-java-17\/\" data-type=\"post\" data-id=\"404\">Teil 1: Rest Service mit Spring Boot 2.5 und Java 17<\/a> wurde die Einrichtung eines REST Service beschrieben. Ziel ist es einfach ein Frontend mit vue zu erstellen. Da ich kaum Erfahrungen mit JavaSript Anwendungen habe, muss ich mich St\u00fcck f\u00fcr St\u00fcck vortasten.<\/p>\n\n\n\n<p>Intellij:  2021.2.3 <br>node.js:  14.18.1<br>npm: 6.14.15<br>@vue\/cli: 4.5.14<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Einrichtung<\/h2>\n\n\n\n<p>Installation von Node.js: <a href=\"https:\/\/nodejs.org\/en\/#download\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/nodejs.org\/en\/#download<\/a><\/p>\n\n\n\n<p>Da ich nur die Intellij Community Version besitze, ist der Javasrcipt Support eingeschr\u00e4nkt. Deswegen erstelle ich ein Beispielprojekt \u00fcber das Vue CLI. Das CLI l\u00e4sst sich \u00fcber folgenden Befehl installieren:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install -g @vue\/cli<\/code><\/pre>\n\n\n\n<p>Dies kann auch \u00fcber das Intellij Terminal ausgef\u00fchrt werden. Man muss evtl. Intellij nach der Node.js Installation neu starten und man muss aufpassen den Befehl nicht in der Powershell auszuf\u00fchren.<\/p>\n\n\n\n<p>Danach kann \u00fcber die Kommandozeile ein Assistent gestartet werden um ein Vue Projekt zu erstellen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>vue ui<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"874\" height=\"415\" src=\"https:\/\/nissel.it\/wp-content\/uploads\/2021\/10\/grafik-2.png\" alt=\"Vue Projektverwaltung \u00fcber localhost:8000 aufrufen\" class=\"wp-image-413\" srcset=\"https:\/\/nissel.it\/wp-content\/uploads\/2021\/10\/grafik-2.png 874w, https:\/\/nissel.it\/wp-content\/uploads\/2021\/10\/grafik-2-300x142.png 300w, https:\/\/nissel.it\/wp-content\/uploads\/2021\/10\/grafik-2-768x365.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<p>Das erstellte Projekt kann nun in intellij ge\u00f6ffnet werden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Projekt starten<\/h2>\n\n\n\n<p>Wie in der Readme.md zu lesen kann das Projekt \u00fcber Folgenden Befehl gebaut und im Entwicklermodus gestartet werden:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install\nnpm run serve<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Quellen<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.jetbrains.com\/help\/idea\/vue-js.html#ws_vue_js_before_you_start\">https:\/\/www.jetbrains.com\/help\/idea\/vue-js.html#ws_vue_js_before_you_start<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/cli.vuejs.org\/\">https:\/\/cli.vuejs.org\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Motivation Im Artikel Teil 1: Rest Service mit Spring Boot 2.5 und Java 17 wurde die Einrichtung eines REST Service beschrieben. Ziel ist es einfach ein Frontend mit vue zu erstellen. Da ich kaum Erfahrungen mit JavaSript Anwendungen habe, muss ich mich St\u00fcck f\u00fcr St\u00fcck vortasten. Intellij: 2021.2.3 node.js: 14.18.1npm: 6.14.15@vue\/cli: 4.5.14<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[21,23,24,22],"class_list":["post-412","post","type-post","status-publish","format-standard","hentry","category-softwareentwicklung","tag-intellij","tag-javascript","tag-npm","tag-vue"],"_links":{"self":[{"href":"https:\/\/nissel.it\/index.php\/wp-json\/wp\/v2\/posts\/412","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nissel.it\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nissel.it\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nissel.it\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nissel.it\/index.php\/wp-json\/wp\/v2\/comments?post=412"}],"version-history":[{"count":2,"href":"https:\/\/nissel.it\/index.php\/wp-json\/wp\/v2\/posts\/412\/revisions"}],"predecessor-version":[{"id":415,"href":"https:\/\/nissel.it\/index.php\/wp-json\/wp\/v2\/posts\/412\/revisions\/415"}],"wp:attachment":[{"href":"https:\/\/nissel.it\/index.php\/wp-json\/wp\/v2\/media?parent=412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nissel.it\/index.php\/wp-json\/wp\/v2\/categories?post=412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nissel.it\/index.php\/wp-json\/wp\/v2\/tags?post=412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}