Sdílet prostřednictvím

Kurz: Vue.js pro začátečníky

Pokud s používáním Vue.jszačínáte, pomůže vám tato příručka začít s některými základy.

Požadavky

Vyzkoušení NodeJS pomocí editoru Visual Studio Code

Pokud ho ještě nemáte, nainstalujte VS Code. Doporučujeme nainstalovat VS Code ve Windows bez ohledu na to, jestli plánujete používat Vue ve Windows nebo WSL.

  1. Otevřete příkazový řádek a vytvořte nový adresář: mkdir HelloVuea zadejte tento adresář: cd HelloVue

  2. Nainstalujte rozhraní příkazového řádku Vue: npm install -g @vue/cli

  3. Vytvořte aplikaci Vue: vue create hello-vue-app

    Budete muset zvolit, jestli chcete použít Vue 2 nebo Vue 3 Preview, nebo ručně vybrat požadované funkce.

    přednastavení Vue CLI

  4. Otevřete adresář nové aplikace hello-vue-app: cd hello-vue-app

  5. Zkuste spustit novou aplikaci Vue ve webovém prohlížeči: npm run serve

    V prohlížeči by se mělo zobrazit "Vítejte v aplikaci Vue.js" na http://localhost:8080. Stisknutím klávesy Ctrl+C můžete zastavit server vue-cli-service.

    Poznámka:

    Pokud pro účely tohoto kurzu používáte WSL (s Ubuntu nebo vaší oblíbenou linuxovou distribucí), budete se muset ujistit, že máte nainstalované rozšíření Remote – WSL, abyste měli nejlepší prostředí pro spouštění a úpravy kódu pomocí vzdáleného serveru VS.

  6. Zkuste úvodní zprávu aktualizovat tak, že ve VS Code otevřete zdrojový kód aplikace Vue, zadejte: code .

  7. VS Code se spustí a zobrazí vaši Vue aplikaci v Průzkumníku souborů. Znovu spusťte svou aplikaci v terminálu s použitím npm run serve a mějte otevřený webový prohlížeč na localhostu, abyste viděli uvítací stránku Vue. App.vue Vyhledejte soubor ve VS Code. Zkuste změnit "Vítejte v aplikaci Vue.js" na "Vítejte v džungli!". Jakmile změnu uložíte, vaše aplikace Vue se automaticky znovu načte.

    automatické načtení aplikace Vue při změně souboru GIF

Dodatečné zdroje

  • Last updated on