BF Summer sales
Pouze tento týden sleva až 80 % na HTML & CSS a JavaScript
80 % bodů zdarma na online výuku díky naší Letní akci!

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 :)


 

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 (2)

 

 

Komentáře

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.

Zatím nikdo nevložil komentář - buď první!