close

Instalace Vue.js a vytvoření vašeho prvního projektu

Chcete-li nainstalovat Vue.js, můžete postupovat podle následujících kroků:

Krok 1: Vytvořte nový adresář pro svůj projekt a otevřete terminál v tomto adresáři.

Krok 2: Použijte npm k instalaci Vue CLI(Command Line Interface) spuštěním následujícího příkazu:

npm install -g @vue/cli


Krok 3: Po úspěšné instalaci můžete vytvořit nový projekt Vue pomocí následujícího příkazu:

vue create my-vue-project


Krok 4: Vyberte možnosti konfigurace pro svůj projekt, včetně instalace Babel, ESLint a CSS Pre-processors(volitelné).

Krok 5: Po dokončení procesu vytváření projektu přejděte do adresáře projektu pomocí příkazu:

cd my-vue-project


Krok 6: Spusťte následující příkaz pro spuštění projektu Vue:

npm run serve


Po dokončení procesu spouštění uvidíte v prohlížeči adresu URL pro přístup k vaší aplikaci Vue.

Jednoduchý příklad Vue.js:

Vytvoříme nový soubor HTML a pojmenujeme ho index.html `. Do tohoto souboru přidejte následující kód:

html  
<!DOCTYPE html>  
<html>  
<head>  
  <title>Vue.js Example</title>  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
</head>  
<body>  
  <div id="app">  
    <h1>{{ message }}</h1>  
    <button @click="changeMessage">Change Message</button>  
  </div>  
  
  <script>  
    new Vue({  
      el: '#app',  
      data: {  
        message: 'Hello Vue.js!'  
      },  
      methods: {  
        changeMessage() {  
          this.message = 'Message changed successfully!';  
        }  
      }  
    });  
  </script>  
</body>  
</html>

V tomto příkladu jsme vytvořili jednoduchou aplikaci Vue s h1 tagem a tlačítkem. Po kliknutí na tlačítko se zpráva změní.

Uložte index.html  soubor a otevřete jej v prohlížeči. Uvidíte úvodní zprávu jako „Ahoj Vue.js!“. Po kliknutí na tlačítko se zpráva změní na „Zpráva úspěšně změněna!“.

Toto je jen jednoduchý příklad, jak začít s Vue.js. Při vývoji svých aplikací můžete prozkoumat mnoho dalších funkcí a výkonných možností Vue.js.