BLACK FRIDAY! Slevy až 80 % jsou všude. Tak je nepropásni a přejdi do rostoucího IT oboru!
BF Sales

Lekce 2 - První aplikace ve Vue.js pomocí Vue CLI

V předchozí lekci, Úvod do Vue.js, jsme se uvedli do Vue.js frameworku a vyzkoušeli si také jednoduché příklady použití.

Vítejte u další lekce on-line kurzu Vue.js. V dnešním tutoriálu si řekneme, jak používat Vue CLI, jak začít s tvořením aplikace pomocí Vue CLI a vytvoříme si svou první komponentu - kalkulačka.

Instalace Vue CLI

Předpokládám, že už máme nainstalovaný Node.js z úvodní lekce, pokud ne, nainstalujte si ho. Jde o jednoduchou klikací instalaci. Dále potřebujeme NPM package (balíček) @vue/cli, který nainstalujeme příkazem:

npm install -g @vue/cli

Příkaz npm je jako node package manager, install jako instalovat. Parametr -g jako globálně (normálně by se to instalovalo do cwd (právě otevřená složka v terminálu), @vue/cli je název package.

Vytvoření aplikace přes Vue CLI

Nejprve otevřeme náš terminál (cmd nebo jakákoliv alternativa) a budeme navigovat na místo, kde chceme náš projekt vytvořit. Nejjednodušeji můžeme otevřít konzoli přímo ve složce, protože nám to cestu v konzoli vytvoří automaticky.

Poté použijeme příkaz pro vytvoření projektu:

vue create nazev-projektu

Za nazev-projektu si můžeme dosadit cokoliv, co se nám zlíbí, v této lekci si dáme název třeba vue-lekce. Prvně se nás Vue CLI zeptá na to, jestli chceme použít základní nastavení, které nám nastavil samotný Vue.js tým, nebo si nastavení upravit podle svých potřeb. Pro zachování jednoduchosti lekce, použijeme základní nastavení, které většinou vystačí v jakémkoliv případě.

Po vytvoření budeme postupovat podle instrukcí Vue CLI, zadáme následující příkazy:

cd nazev-projektu
npm serve
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Příkaz cd snad známe, navigujeme tím do naší projektové složky. npm serve nám spustí naši aplikaci. Můžeme tedy v prohlížeči zadat adresu localhost:8080 a uvidíme základní stránku, kterou pro nás Vue CLI vytvořilo:

Struktura projektu

Další na řadě si prohlédneme strukturu projektu, které nám Vue CLI vytvořilo, abychom se zorientovali a věděli, co k čemu slouží:

Jako první vidíme složku node_modules/, kam chodit nebudeme. Pokud máme zkušenosti s jinými frameworky tak asi víme, že se v ní nachází všechny potřebné balíčky pro funkce Vue.js, včetně source kódu Vue.js, který jsme v úvodní lekci používali pomocí <script> tagů.

Další složku máme public/, ve které leží většinou různé obrázky, ikonky a další věci, které nejsou kód, ale jsou veřejné pro uživatele. V této složce můžeme najít soubor index.html, ve kterém nalezneme tagy <div id="app">. Soubor vypadá takto:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Pro nás je důležitý tag <div id="app"></div>. V tomto tagu bude "ležet" naše aplikace. Je to samé, jako když jsme psali v normálním HTML naší první Vue aplikaci.

Třetí složka je src/ (source). Asi nejdůležitější složka, v které bude všechen náš kód. První soubor ve složce je App.vue, ve kterém se shromáždí všechny naše komponenty a můžou se například propojit různými proměnnými:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Hned si můžeme všimnout tagu <template>, ve kterém bude ležet cokoliv, co se dostane do tagu <div id="app">, který jsme viděli v souboru public/index.html.

Jako druhý, neznámý tag, můžeme vidět <HelloWorld msg="Welcome to Your Vue.js App">, což je Vue syntax pro zobrazování komponentů a předávání informací do těchto tagů. V tomto případě předáme proměnnou s názvem msg s hodnotou Welcome to Your Vue.js App.

A jako posledně si vysvětlíme import uvnitř tagu <script>, který nám importuje komponenty do souboru App.vue. Jako první "parametr" je název komponenty HelloWorld a jako druhý je cesta (from './components/HelloWorld.vue'), kde se soubor nachází. Poté následuje jeho zaregistrování v aplikaci pomocí tohoto kódu:

export default {
  name: 'App',
  components: { /* Zde jsou registrovány komponenty */
    HelloWorld
  }
}

Nyní můžeme smazat vše, co už nebudeme potřebovat, bude to vypadat nějak takto:

<template>
   <div id="app"></div>
</template>

<script>
   export default {
    name: 'App',
   }
</script>

<style>
#app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
}
</style>

Tvorba komponenty

Když teď přejdeme na stránku localhost:8080, tak se nám zobrazí prázdná stránka.

Ve složce components/ můžeme vidět komponentu s názvem HelloWorld.vue, ve které byla napsaná celá stránka, kterou nám Vue CLI vytvořila. Pro naše účely bude nejlepší, abychom tuto komponentu pročistili a upravili:

<template>
    <div class="calculator">
        <h1>Kalkulačka ve Vue-JS</h1>
    </div>
</template>

<script>
   export default {
    name: 'Calculator',
   }
</script>

Pokud najedeme znovu na adresu localhost:8080, uvidíme stále prázdnou stránku. Jak je to možné? Přeci jsme přidali <h1> tag s nějakým textem, proč se tedy nic neukazuje? Je to tím, že jsme v hlavním souboru App.vue neregistrovali a nepoužili naší komponentu.

Přejmenujeme tedy ve složce components/ soubor HelloWorld.vue na Calculator.vue a importujeme ho do hlavního souboru App.vue uvnitř tagu <script> pomocí sekvence příkazů import Calculator from '@/components/Calculator'. Dále ho registrujeme uvnitř components jako Calculator. Nyní ho můžeme zahrnout v naši sekci <template> v HTML pomocí syntaxe <nazev-komponenty />. V našem případě to bude <Calculator />:

<template>
   <div id="app">
      <Calculator />
   </div>
</template>

<script>
import Calculator from '@/components/Calculator'

export default {
    name: 'App',
    components: {
        Calculator,
    },
}
</script>

Nyní uvidíme nápis Kalkulačka ve Vue.js na localhost:8080. Vytvořili jsme si aplikaci pomocí Vue CLI a naší první komponentu, kterou jsme zaregistrovali a zobrazili.

To by bylo vše pro dnešní úvod do Vue CLI :)

V další lekci, Kalkulačka ve Vue.js, začneme psát naš Vue komponent pro kalkulačku.


 

Předchozí článek
Úvod do Vue.js
Všechny články v sekci
Vue.js
Článek pro vás napsal Jakub Konečný
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Aktivity (3)

 

 

Komentáře

Avatar
Tomáš Daněk:18. srpna 23:31

Pro spuštění aplikace je nutné zadat příkaz:

npm run serve
 
Odpovědět
18. srpna 23:31
Avatar
Jakub Kunc
Člen
Avatar
Jakub Kunc:18. října 13:50

Ahoj díky, za články. Nemělo by být v té poslední části v tom HelloWorld.vue opačné lomítko u toho tagu místo <h1>Kalkulačka ve Vue-JS </h1> místo <h1>Kalkulačka ve Vue-JS <\h1> ?

Editováno 18. října 13:51
Odpovědět
18. října 13:50
Nesuďte, abyste nebyli souzeni.
Avatar
Jakub Konečný
Redaktor
Avatar
Odpovídá na Jakub Kunc
Jakub Konečný:19. října 15:39

Určitě, děkuju za upozornění, malinká chyba při přepisu.

 
Odpovědět
19. října 15:39
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
dehtak
Člen
Avatar
dehtak:19. listopadu 9:15

To je sice hezky ale nefunguje to v Exploreru takze vue je nepouzitelny. Nikde sem nenarazil na kloudnej navod jak to zprovoznit v exploreru. Se tam musi pridat naky polygon knihovny. To si udelam web radej v php nez se compilovat s nakejma srackama

 
Odpovědět
19. listopadu 9:15
Avatar
Milan Turyna
Redaktor
Avatar
Odpovídá na dehtak
Milan Turyna:19. listopadu 13:44

Není důvod být vulgární, každý způsob vývoje má své pro a proti - také záleží na typu projektu. K zprovoznění Vue.js by mělo stačit nastavit kompilaci kódu aby byl validní pro IE, teda aspoň myslím že to tak funguje.
https://cli.vuejs.org/…ibility.html#…
https://jacklyons.me/…ing-in-ie11/
Pokud tomu tak není, tak co znamená "nefunguje to v Exploreru", co to píše do konzole?

Mimochodem, Vue.js se nedá porovnávat s PHP, jsou to zcela odlišné (teda až na to že oba se používají na webový vývoj) věci. Vue je reaktivní framework pro vytváření interaktivního UI na straně klienta. PHP je programovací jazyk běžící na straně serveru, proto se můžeme setkat i s případy kdy Vue a PHP jsou použity na jednom projektu, Vue zajistí klientskou část a PHP serverovou část a mezi sebou komunikují pomocí API.

 
Odpovědět
19. listopadu 13:44
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.