Konfigurowanie pierwszego projektu Vue.js

Vue.js to progresywny framework JavaScript do tworzenia interfejsów użytkownika i aplikacji jednostronicowych. Jest bardzo elastyczny i łatwy do zintegrowania z innymi bibliotekami lub istniejącymi projektami. Ten przewodnik przeprowadzi Cię przez kroki konfiguracji pierwszego projektu Vue.js przy użyciu Vue CLI, potężnego narzędzia do tworzenia rusztowań i zarządzania aplikacjami Vue.

Wymagania wstępne

Przed skonfigurowaniem projektu Vue.js upewnij się, że w systemie zainstalowano następujące elementy:

• Node.js i npm: Vue.js wymaga zainstalowania Node.js i npm (Node Package Manager). Możesz je pobrać z oficjalnej strony Node.js.

Krok 1: Zainstaluj Vue CLI

Vue CLI (Command Line Interface) to narzędzie, które pomaga Ci łatwo tworzyć i zarządzać projektami Vue.js. Aby zainstalować Vue CLI globalnie w swoim systemie, otwórz terminal lub wiersz poleceń i uruchom następujące polecenie:

npm install -g @vue/cli

To polecenie instaluje globalnie interfejs wiersza poleceń Vue, umożliwiając dostęp do polecenia vue z dowolnego miejsca w terminalu.

Krok 2: Utwórz nowy projekt Vue

Po zainstalowaniu Vue CLI możesz utworzyć nowy projekt Vue.js, uruchamiając następujące polecenie:

vue create my-vue-app

Zostaniesz poproszony o wybranie ustawienia wstępnego dla swojego projektu. Możesz wybrać domyślne ustawienie wstępne, które obejmuje Babel i ESLint, lub ręcznie wybrać funkcje, takie jak Vue Router, Vuex, TypeScript i inne. Początkującym zaleca się wybranie domyślnego ustawienia wstępnego, naciskając Enter.

Następnie Vue CLI utworzy nowy folder o nazwie my-vue-app i skonfiguruje strukturę projektu ze wszystkimi niezbędnymi plikami i konfiguracjami.

Krok 3: Przejdź do folderu projektu

Po utworzeniu projektu przejdź do folderu projektu, korzystając z następującego polecenia:

cd my-vue-app

Spowoduje to zmianę katalogu roboczego terminala na nowo utworzony folder projektu Vue.js.

Krok 4: Uruchom serwer deweloperski

Aby zobaczyć swoją nową aplikację Vue.js w działaniu, uruchom lokalny serwer programistyczny, wykonując polecenie:

npm run serve

To polecenie uruchomi serwer deweloperski na http://localhost:8080 (lub innym dostępnym porcie). Otwórz przeglądarkę internetową i przejdź do tego adresu URL, aby wyświetlić nową aplikację Vue.js.

Zrozumienie struktury projektu

Po utworzeniu nowego projektu Vue.js zobaczysz dobrze zorganizowaną strukturę projektu. Oto kluczowe pliki i foldery:

• src: Ten folder zawiera kod źródłowy dla Twojej aplikacji Vue.js. Wszystkie komponenty, widoki i style znajdują się tutaj.
• public: Ten folder zawiera zasoby statyczne, takie jak obrazy, czcionki i plik index.html, który stanowi punkt wejścia dla Twojej aplikacji.
• src/main.js: Główny punkt wejścia dla Twojej aplikacji Vue.js. Ten plik inicjuje instancję Vue i montuje ją w DOM.
• src/App.vue: Główny komponent Twojej aplikacji. Możesz zmodyfikować ten plik, aby zmienić główny układ swojej aplikacji.
• src/components: Ten folder zawiera przykładowe komponenty Vue, takie jak HelloWorld.vue. Możesz dodać tutaj nowe komponenty i zaimportować je do swojej aplikacji.

Krok 5: Dostosuj swoją aplikację

Możesz zacząć dostosowywać swoją aplikację Vue.js, edytując plik App.vue i tworząc nowe komponenty. Oto przykład prostego komponentu Vue:

<template>
  <div>
    <h1>Welcome to My First Vue.js Project!</h1>
    <p>This is a simple Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'WelcomeComponent'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Zapisz zmiany i od razu zobacz wyniki w przeglądarce dzięki funkcji szybkiego przeładowywania Vue.

Wniosek

Gratulacje! Udało Ci się skonfigurować swój pierwszy projekt Vue.js i poznać podstawy tworzenia i uruchamiania aplikacji Vue. Dzięki Vue CLI masz potężne narzędzie, które pomoże Ci tworzyć, rozwijać i zarządzać projektami Vue.js. Stąd możesz odkrywać bardziej zaawansowane funkcje, takie jak Vue Router do routingu, Vuex do zarządzania stanem i Composition API do bardziej wydajnego i elastycznego rozwoju.