Zrozumienie interfejsu wiersza poleceń Vue.js i jego użycia

Vue.js CLI (Command Line Interface) to potężne narzędzie, które upraszcza proces konfigurowania, rozwijania i zarządzania projektami Vue.js. Zapewnia ustandaryzowany i wydajny sposób tworzenia nowych projektów, zarządzania zależnościami i konfigurowania ustawień kompilacji. W tym artykule przyjrzymy się funkcjom Vue CLI i pokażemy, jak skutecznie go używać.

Instalowanie Vue CLI

Aby rozpocząć korzystanie z Vue CLI, musisz zainstalować go globalnie w swoim systemie. Upewnij się, że masz zainstalowane Node.js i npm (Node Package Manager), a następnie uruchom następujące polecenie w terminalu lub wierszu poleceń:

npm install -g @vue/cli

To polecenie instaluje globalnie interfejs wiersza poleceń Vue CLI, dzięki czemu polecenie vue jest dostępne do tworzenia i zarządzania projektami Vue.js.

Tworzenie nowego projektu Vue.js

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

vue create my-vue-project

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 i TypeScript. Początkującym zaleca się wybranie domyślnego ustawienia wstępnego, naciskając Enter.

Zrozumienie ustawień wstępnych Vue CLI

Vue CLI oferuje kilka opcji konfiguracji projektu za pomocą ustawień predefiniowanych:

• Domyślne ustawienie wstępne: Zawiera niezbędne narzędzia, takie jak Babel i ESLint. Nadaje się do większości projektów i dobry punkt wyjścia dla początkujących.
• Ręczny wybór funkcji: Umożliwia wybór określonych funkcji, takich jak Vue Router do routingu, Vuex do zarządzania stanem, TypeScript do sprawdzania typów i inne.

Struktura projektu

Po utworzeniu projektu zobaczysz standardową strukturę projektu Vue.js. Oto kilka kluczowych folderów i plików:

• src: Zawiera kod źródłowy aplikacji, obejmujący komponenty, widoki i style.
• public: Zawiera zasoby statyczne i plik index.html, który służy jako punkt wejścia dla Twojej aplikacji.
• src/main.js: Plik wejściowy dla Twojej aplikacji Vue. Inicjuje instancję Vue i montuje ją w DOM.
• src/App.vue: Główny komponent Twojej aplikacji. Możesz dostosować ten plik, aby zdefiniować główny układ swojej aplikacji.
• src/components: Zawiera komponenty Vue. Możesz tutaj dodać nowe komponenty i zaimportować je do swojej aplikacji.

Uruchamianie serwera deweloperskiego

Aby zobaczyć swoją aplikację Vue.js w działaniu, uruchom serwer programistyczny, uruchamiając następujące polecenie:

npm run serve

Spowoduje to uruchomienie lokalnego serwera na http://localhost:8080 (lub innym dostępnym porcie). Otwórz ten adres URL w przeglądarce, aby wyświetlić aplikację.

Budynek do produkcji

Gdy będziesz gotowy do wdrożenia swojej aplikacji, musisz ją skompilować do produkcji. Uruchom następujące polecenie, aby utworzyć kompilację gotową do produkcji:

npm run build

To polecenie generuje zoptymalizowane i zminimalizowane pliki w folderze dist, które można wdrożyć na serwerze WWW.

Korzystanie z wtyczek Vue CLI

Vue CLI obsługuje wtyczki, które dodają funkcje i możliwości do Twojego projektu. Aby zainstalować wtyczkę, uruchom następujące polecenie:

vue add 

Na przykład, aby dodać Vue Router do swojego projektu, należy uruchomić:

vue add router

Aby usunąć wtyczkę, użyj polecenia vue remove:

vue remove router

Wtyczki można również instalować i zarządzać nimi za pomocą pliku vue.config.js lub poprzez modyfikację konfiguracji projektu.

Dostosowywanie konfiguracji Vue CLI

Możesz dostosować konfigurację Vue CLI, tworząc lub modyfikując plik vue.config.js w katalogu głównym swojego projektu. Ten plik umożliwia dostosowanie różnych ustawień, takich jak konfiguracje proxy, ścieżki publiczne i inne.

module.exports = {
  devServer: {
    proxy: 'http://api.example.com'
  },
  publicPath: '/my-app/'
};

Wniosek

Vue.js CLI to potężne narzędzie, które upraszcza proces tworzenia, zarządzania i konfigurowania projektów Vue.js. Korzystając z Vue CLI, możesz szybko skonfigurować nowy projekt, uruchomić serwer deweloperski, budować do produkcji i dostosowywać swój projekt za pomocą wtyczek i opcji konfiguracji. Dzięki tym możliwościom jesteś dobrze wyposażony, aby rozpocząć tworzenie nowoczesnych, dynamicznych aplikacji internetowych z Vue.js.