Skip to content

Jak začít

Vyzkoušejte Vue online

  • Pokud si chcete Vue rychle vyzkoušet, lze ho spustit přímo v našem Hřišti.

  • Pokud máte raději čistě HTML setup bez build fáze, můžete jako počáteční bod využít toto JSFiddle.

  • Pokud už ovládáte Node.js a koncept build nástrojů, můžete si kompletní build vyzkoušet jen ve vašem prohlížeči na StackBlitz.

Vytvoření Vue aplikace

Předpoklady

  • Znalost použití příkazového řádku (command line)
  • Nainstalovaný Node.js ve verzi 18.3 nebo vyšší

V této sekci si ukážeme jak vystavět základ Vue Single Page aplikaci na vašem lokálním počítači. Vytvořený projekt bude používat build setup založený na Vite a umožní nám použít Vue Single-File komponenty (SFCs).

Zkontrolujte, že máte nainstalovanou nejnovější verzi Node.js a váš aktuální pracovní adresář je ten, v němž chcete založit projekt. Spusťte ve vašem příkazovém řádku následující příkaz (bez znaku $):

npm
pnpm
yarn
bun
sh
$ npm create vue@latest

Tento příkaz nainstaluje a spustí create-vue, oficiální nástroj Vue pro přípravu základů nové aplikace. Objeví se vstup s několika možnostmi nastavení jako je TypeScript a podpora testování:

 Project name: <jmeno-vaseho-projektu>
 Add TypeScript? No / Yes
 Add JSX Support? No / Yes
 Add Vue Router for Single Page Application development? No / Yes
 Add Pinia for state management? No / Yes
 Add Vitest for Unit testing? No / Yes
 Add an End-to-End Testing Solution? No / Cypress / Nightwatch / Playwright
 Add ESLint for code quality? … No / Yes
 Add Prettier for code formatting? No / Yes
 Add Vue DevTools 7 extension for debugging? (experimental) No / Yes

Scaffolding project in ./<jmeno-vaseho-projektu>...
Done.

Pokud si nejste nastavením jisti, zvolte prozatím jednoduše stisknutím Enter volbu No. Poté, co je projekt vytvořen, zadejte následující příkazy pro instalaci závislostí a spuštění vývojového (dev) serveru:

npm
pnpm
yarn
bun
sh
$ cd <jmeno-vaseho-projektu>
$ npm install
$ npm run dev

Nyní by už váš první Vue projekt měl běžet! Všimněte si, že ukázkové komponenty ve vygenerovaném projektu jsou napsány s využitím Composition API a <script setup>, a nikoli v Options API. Zde jsou nějaké další tipy:

Jakmile budete připraveni nasadit vaši aplikaci do produkce, spusťte následující:

npm
pnpm
yarn
bun
sh
$ npm run build

Příkaz vytvoří build připravený k produkčnímu nasazení aplikace v podsložce ./dist uvnitř projektu. Podívejte se na průvodce Nasazením do produkce, abyste se o nasazování vaší aplikace do produkce dozvěděli víc.

Další kroky >

Použití Vue z CDN

Můžete použít distribuci Vue přímo z CDN úložiště pomocí script tagu:

html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Zde jsme použili unpkg, ale je možné využití jakékoli CDN které umí distribuovat npm balíčky, například jsdelivr nebo cdnjs. Samozřejmě si můžete soubor také stáhnout a distribuovat sami.

Při použití Vue z CDN není v procesu žádná build fáze. Díky tomu je příprava mnohem jednodušší. Je to vhodné např. pro obohacení statického HTML nebo integraci s backend frameworkem. Nicméně nebudete moci použít SFC syntaxi.

Použití globálního buildu

Výše uvedený odkaz vede na globalní build Vue, kde jsou všechny API nejvyšší úrovně publikované jako vlastnosti globálního Vue objektu. Zde je kompletní příklad s použitím globálního buildu:

html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

CodePen Demo >

html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

CodePen Demo >

TIP

Řada příkladů pro Composition API napříč celým průvodcem bude používat syntaxi <script setup>, která vyžaduje build nástroje. Pokud plánujete používat Composition API bez build fáze, podívejte se na použití hooku setup().

Použití ES Module buildu

Ve zbytku dokumentace budeme primárně používat ES modules syntaxi. Téměř všechny moderní prohlížeče dnes přirozeně podporují ES moduly, takže můžeme použít Vue z CDN přes nativní ES moduly takto:

html
<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>
html
<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

Všimněte si, že používáme <script type="module"> a importovaná CDN URL vede na ES modules build verzi Vue.

Použití Import map

Ve výše uvedeníém příkladu importujeme z plné CDN URL, ale ve většině následující dokumentace uvidíte kód podobný tomuto:

js
import { createApp } from 'vue'

Můžeme naučit prohlížeč, kde najde vue import s využitím Import Maps:

html
<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

CodePen Demo >

html
<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

CodePen Demo >

Do import mapy můžete přidat i záznamy pro další závislosti - ujistěte se ale, že ukazují na ES modules verzi knihovny, kterou chcete použít.

Podpora Import Maps v prohlížečích

Import Maps jsou relativně nová funkcionalita prohlížečů. Ujistěte se že používáte prohlížeč, který je podporuje. Zejména pozor, že jsou podporovány až od Safari 16.4+.

Poznámka k produkčnímu použití

Dosavadní příklady jsou používány při development buildech Vue - pokud chcete Vue z CDN používat i v produkci, konzultujte s Průvodcem nasazením do produkce.

I když lze Vue používat i bez build fáze, alternativou je zvážit využití vuejs/petite-vue, které může lépe vyhovovat tam, kde by bylo možné sáhnout po jquery/jquery (v minulosti) nebo alpinejs/alpine (v současnosti).

Rozdělování modulů

Jak se budeme nořit hlouběji do průvodce, možná budete potřebovat rozdělit kód do samostatných JavaScript souborů, aby je bylo možné jednodušeji udržovat. Například:

html
<!-- index.html -->
<div id="app"></div>

<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>
js
// my-component.js
export default {
  data() {
    return { pocet: 0 }
  },
  template: `<div>Počet je {{ pocet }}</div>`
}
js
// my-component.js
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `<div>Počet je {{ count }}</div>`
}

Pokud otevřete výše uvedené index.html v prohlížeči, uvidíte, že stránka vrací chybu, protože ES moduly neumí pracovat přes file:// protokol, který prohlížeč používá pro otevírání lokálních souborů.

Z bezpečnostních důvodů mohou ES moduly fungovat jen přes protokol http:// používaný prohlížeči při otevírání webových stránek. Aby ES moduly fungovaly i na vašem lokálním stroji, musíme index.html servírovat přes http:// pomocí lokálního HTTP serveru.

Pro spuštění lokálního HTTP serveru si napřed nainstalujte Node.js a potom zadejte npx serve z příkazové řádky ve stejném adresáři, v jakém je váš HTML soubor. Můžete použít i jakýkoli jiný HTTP server, který umí poskytovat statické soubory se správnými MIME typy.

Mohli jste si povšimnout, že šablona importované komponenty je zapsaná jako inline JavaScript řetězec. Pokud používáte VS Code, můžete nainstalovat rozšíření es6‑string‑html a pro zapnutí zvýraznění syntaxe řetězce uvést předponou /*html*/.

Další kroky

Pokud jste přeskočili Úvod, silně doporučujme přečíst si ho dřív, než se pustíte do zbytku dokumentace.

Jak začít has loaded