Aby zainstalować Vue.js, wykonaj poniższe czynności:
Krok 1: Utwórz nowy katalog dla swojego projektu i otwórz terminal w tym katalogu.
Krok 2: Użyj npm, aby zainstalować Vue CLI(interfejs wiersza poleceń), uruchamiając następujące polecenie:
npm install -g @vue/cli
Krok 3: Po udanej instalacji możesz utworzyć nowy projekt Vue za pomocą następującego polecenia:
vue create my-vue-project
Krok 4: Wybierz opcje konfiguracji dla swojego projektu, w tym instalację Babel, ESLint i preprocesorów CSS(opcjonalnie).
Krok 5: Po zakończeniu procesu tworzenia projektu przejdź do katalogu projektu za pomocą polecenia:
cd my-vue-project
Krok 6: Uruchom następujące polecenie, aby uruchomić projekt Vue:
npm run serve
Po zakończeniu procesu uruchamiania zobaczysz adres URL umożliwiający dostęp do aplikacji Vue w przeglądarce.
Prosty przykład Vue.js:
Stwórzmy nowy plik HTML i nazwijmy go index.html `. W tym pliku dodaj następujący kod:
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> W tym przykładzie stworzyliśmy prostą aplikację Vue ze h1 znacznikiem i przyciskiem. Po kliknięciu przycisku komunikat się zmieni.
Zapisz index.html plik i otwórz go w przeglądarce. Zobaczysz początkową wiadomość jako „Hello Vue.js!”. Po kliknięciu przycisku wiadomość zmieni się na „Wiadomość została zmieniona pomyślnie!”.
To tylko prosty przykład ułatwiający rozpoczęcie pracy z Vue.js. Podczas tworzenia aplikacji możesz odkrywać wiele innych funkcji i potężnych możliwości Vue.js.