VueJS - Konfiguracja środowiska
Istnieje wiele sposobów instalacji VueJS. Niektóre sposoby przeprowadzenia instalacji zostaną omówione w dalszej części.
Używanie tagu <script> bezpośrednio w pliku HTML
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body></body>
</html>
Przejdź do strony głównej https://vuejs.org/v2/guide/installation.htmlVueJS i pobierz vue.js zgodnie z potrzebami. Istnieją dwie wersje do użytku - wersja produkcyjna i wersja rozwojowa. Wersja rozwojowa nie jest zminimalizowana, natomiast wersja produkcyjna jest zminimalizowana, jak pokazano na poniższym zrzucie ekranu. Wersja rozwojowa pomoże z ostrzeżeniami i trybem debugowania podczas opracowywania projektu.
Korzystanie z CDN
Możemy też zacząć korzystać z pliku VueJS z biblioteki CDN. Połączeniehttps://unpkg.com/vueudostępni najnowszą wersję VueJS. VueJS jest również dostępny na jsDelivr (https://cdn.jsdelivr.net/npm/vue/dist/vue.js) i cdnjs (https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js).
W razie potrzeby możemy hostować pliki na naszym końcu i rozpocząć tworzenie VueJS.
Korzystanie z NPM
W przypadku aplikacji na dużą skalę z VueJS zaleca się instalację przy użyciu pakietu npm. Jest dostarczany z Browserify i Webpack wraz z innymi niezbędnymi narzędziami, które pomagają w rozwoju. Poniżej znajduje się polecenie instalacji przy użyciu npm.
npm install vue
Korzystanie z wiersza poleceń CLI
VueJS zapewnia również CLI do zainstalowania vue i rozpoczęcia aktywacji serwera. Aby zainstalować za pomocą CLI, musimy mieć zainstalowany CLI, co odbywa się za pomocą następującego polecenia.
npm install --global vue-cli
Po zakończeniu pokazuje wersję CLI dla VueJS. Instalacja zajmuje kilka minut.
+ [email protected]
added 965 packages in 355.414s
Poniżej znajduje się polecenie tworzenia projektu za pomocą Webpack.
vue init webpack myproject
Aby rozpocząć, użyj następującego polecenia.
cd myproject
npm install
npm run dev
Gdy wykonamy npm run dev, uruchamia on serwer i dostarcza adres URL do wyświetlania w przeglądarce, jak pokazano na poniższym zrzucie ekranu.
Struktura projektu przy użyciu CLI wygląda następująco.