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 Note.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 ​

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 create vue@latest

$ pnpm create vue@latest

$ yarn create vue@latest

$ bun 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 / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … 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:

$ cd <jmeno-vaseho-projektu>
$ npm install
$ npm run dev

$ cd <jmeno-vaseho-projektu>
$ pnpm install
$ pnpm run dev

$ cd <jmeno-vaseho-projektu>
$ yarn
$ yarn dev

$ cd <jmeno-vaseho-projektu>
$ bun install
$ bun 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:

• Doporučené vývojové prostředí (IDE) je Visual Studio Code + rozšíření Vue - Official. Pokud používáte jiný editor, zkontrolujte sekci podpory v IDE.
• Více o vývojových nástrojích vč. integrace s frameworky pro backend, je řešeno v sekci Nástroje.
• Pokud se chcete dozvědět víc o build nástroji Vite v pozadí, podívejte se na dokumentaci pro Vite.
• Pokud si vyberete použití TypeScriptu, podívejte se na průvodce použitím TypeScriptu.

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

$ npm run build

$ pnpm run build

$ yarn build

$ bun 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:

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

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

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

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:

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

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

import { createApp } from 'vue'

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

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

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

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.

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:

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

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

  createApp(MyComponent).mount('#app')
</script>

// my-component.js
export default {
  data() {
    return { pocet: 0 }
  },
  template: `<div>Počet je {{ pocet }}</div>`
}

// 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 VSCode, 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.