Webové komponenty #1: Vývoj jednoduché komponenty ve Vue.JS

Jak vytvořit jednoduchou webovou komponentu s pomocí velmi populárního JavaScript Frameworku Vue.js

Pro naše potřeby budeme potřebovat Visual Studio Code s nainstalovaným rozšířením Vetur a samozřejmě nezbytné Vue CLI, které nám pohodlně umožní vývoj libovolné znovu použitelné webové komponenty.

Příprava vývojového prostředí

Ve VSC vytvoříme nový terminál a nainstalujeme Vue CLI:

npm install -g @vue/cli

Vytvoříme si složku s projektem..

md my-components
cd my-components

Inicializujeme projekt..

npm init -y

Nainstalujeme Vue do složky projektu.

npm i vue

Dodatečně (volitelně) aktivujeme automatickou kompilaci CSS pomocí LESS loaderu.

npm install -D less-loader less

Výsledný package.json v projektu vypadá následovně..

{
  "name": "my-components",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "less": "^3.10.3",
    "less-loader": "^5.0.0"
  }
}

Vývoj jednoduché webové komponenty

Vytvoříme si jednoduchou webovou komponentu. Ve složce našeho projektu si vytvoříme nový soubor my-component.vue s následujícím obsahem:

<template>
    <div>Hello {{name}}</div>
</template>

<style>
    div {
        border: 1px solid @color;
        padding:4rem;
    }
</style>

<script>
export default {
    props: {
        name: { type: String, default: "Martin" }
    }
}
</script>

A nyní již můžeme vyzkoušet, jestli vývojové prostředí funguje správně.

vue serve my-component.vue

Výsledek v terminálu nám zobrazí adresu, na které najdeme vyrenderovanou komponentu v prohlížeči.

DONE  Compiled successfully in 141ms

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.31.231:8080/

Export výsledné komponenty

Výsledek našeho vývoje si vyexportujeme do komponenty, kterou můžeme následně používat dále.

vue build --target wc my-component.vue

Výsledkem buildu najdeme ve složce my-components/dist/ ve formě komprimované i nekomprimované verze komponenty a to včetně souboru demo.html, které demonstruje použití.

<meta charset="utf-8">
<title>my-component demo</title>
<script src="https://unpkg.com/vue"></script>
<script src="./my-component.js"></script>

<my-component></my-component>

Metoda Vue.component()

Komponentu lze vytvořit i velmi jednoduše tak, že vše definujeme prostřednictvím jednoho jediného souboru, který následně vložíme do HTML dokumentu.

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>Vue.js komponenta</title>
</head>
<body>
    <div id="app">
        <my-rounded-image src="https://picsum.photos/300/300">
        </my-rounded-image>

        <my-rounded-image src="https://picsum.photos/200/200">
        </my-rounded-image>
    </div>
    <script type="text/javascript" src="app.js"></script>
</body>
</html>

V souboru app.js definujeme aplikaci i komponentu například takto:

Vue.component("my-rounded-image", {
    template: '<div style="display:inline-block;border-radius:50%;overflow:hidden"><img v-bind:src="src"></div>',
    props: ["src"]
});

var app = new Vue({
    el: '#app'
})

Tato technika se hodí zejména spíše pro

drobné zlepšení interakce uživatele s aplikací
malé dílčí sdílené komponenty zobrazující konkrétní jednoduché hodnoty

Nevýhody

Ztrácíme možnost zvýraznění syntaxe v editoru - HTML je uzavřené v template
V metodě Vue.component() není možné definovat separátní scoped CSS styly pro komponentu
Jsme odkázání striktně na JavaScript (nelze použít pre-processing jiného jazyka)

Pro komplexnější vývoj je vždy vhodnější použít Single Component File. Tedy vytvořit si soubor my-component.vue a definovat šablonu, styly i chování komponenty v tomto souboru.

V dalším díle si ukážeme vývoj složitějších komponent.