2. Tworzenie środowiska pracy

Korzystamy ze środowiska pracy opisanego szczegółowo w dokumencie [2]:

• Visual Studio Code (VSCode) do pisania kodu JavaScript;
• [node.js] do ich uruchamiania;
• [npm] do pobrania i zainstalowania bibliotek JavaScript, których będziemy potrzebować;

Tworzymy środowisko robocze w [VSCode]:

• w [1-5] otwieramy pusty folder [vuejs] w [VSCode];

• w [8-10] instalujemy zależność [@vue/cli], która pozwoli nam zainicjować projekt [vue.js]. Ta zależność pociąga za sobą dużą liczbę pakietów (kilkaset);

Następnie w tym samym terminalu wpisujemy polecenie [vue create .], które powoduje utworzenie projektu [vue.js] w bieżącym katalogu (.) :

• w [13] rozpoczyna się seria pytań służących do skonfigurowania projektu;

• po udzieleniu odpowiedzi na wszystkie pytania pobierane są nowe pakiety i generowany jest projekt w bieżącym katalogu o nazwie [14].

Przyjrzyjmy się, co zostało wygenerowane. Plik [package.json] ma następującą treść:

{
  "name": "vuejs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve vuejs-20/main.js",
    "build": "vue-cli-service build vuejs-20/main.js",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "bootstrap-vue": "^2.0.2",
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

Komentarze

• wiersze 14–22: wśród zależności niezbędnych do rozwoju widoczne są odniesienia do dwóch narzędzi [eslint, babel], z których korzystaliśmy już w dwóch poprzednich rozdziałach. Dołączono do nich wtyczki tych dwóch narzędzi przeznaczone do wykorzystania w ramach [vue.js];
• wiersz 34: to pakiet [babel-eslint] przeprowadzi transpilację kodu jS z ES6 na ES5;
• wiersze 5–9: utworzono trzy zadania o nazwie [npm]:
  • [build]: służy do tworzenia skompilowanej wersji projektu gotowej do wdrożenia do produkcji;
  • [serve]: uruchamia projekt na serwerze WWW. To właśnie za pomocą tego narzędzia przeprowadza się testy w trakcie rozwoju. Podobnie jak w przypadku [webpack-dev-server], zmiana kodu źródłowego projektu powoduje automatyczną rekompilację projektu i jego ponowne załadowanie przez serwer WWW;
  • [lint]: służy do analizy kodów jS i generowania raportów. Nie będziemy tutaj korzystać z tego narzędzia;

Wygenerowano plik [README.md] o następującej treści:

# vuejs

## Konfiguracja projektu
```
npm install
```

### Kompilacja i automatyczne odświeżanie na potrzeby rozwoju
```
npm run serve
```

### Kompilacje i minifikacja na potrzeby środowiska produkcyjnego
```
npm run build
```

### Uruchom testy
```
npm run test
```

### Sprawdzanie poprawności i poprawianie plików
```
npm run lint
```

### Dostosuj konfigurację
See [Configuration Reference](https://cli.vuejs.org/config/).

Plik ten zawiera podsumowanie poleceń służących do zarządzania projektem.

Wiemy, że w pliku [VSCode] do wykonania proponowane są zadania [npm]:

• w pliku [1-3] wykonujemy polecenie [serve], które skompiluje, a następnie uruchomi projekt [4-5];

Po uruchomieniu URL i [http://localhost:8080] otrzymujemy następującą stronę:

Nieco dalej wyjaśnimy, co doprowadziło do powstania tej strony.

Kontynuujmy konfigurację naszego środowiska pracy:

• w powyższym [2] widzimy wskaźniki [git]. [git] to menedżer kodu źródłowego, który pozwala zarządzać kolejnymi wersjami kodu i udostępniać je programistom. Wyłączymy to narzędzie dla projektu;
• w [3-5] przechodzimy do właściwości projektu;

• w [9-10] wyłączamy korzystanie z [git] w projekcie;

Napiszemy różne testy, aby zademonstrować działanie [vue.js]. Nie chcemy jednak za każdym razem tworzyć nowego projektu, ponieważ wymagałoby to każdorazowego generowania folderu [node_modules], który zajmuje kilkaset megabajtów. Wróćmy do zadań [npm] w pliku [package.json]:

  "scripts": {
    "serve": "vue-cli-service serve vuejs-00/main.js",
    "build": "vue-cli-service build vuejs-00/main.js",
    "lint": "vue-cli-service lint"
  },

• wiersz 2: polecenie [serve] domyślnie wykorzystuje:
  • plik [public/index.html];
  • powiązany z plikiem [src/main.js];

W wierszu 2 można określić w poleceniu [serve] punkt wejścia projektu, na przykład:

"serve": "vue-cli-service serve vuejs-00/main.js",

Spróbujmy:

• w [1] folder [src] został przemianowany na [vuejs-00];
• po zmianie na [2-3] zmodyfikowano polecenie [serve];
• w [4-6] uruchomiono projekt;

Otrzymujemy ten sam wynik co poprzednio:

W ramach naszych testów postąpimy zatem w następujący sposób:

• zapis kodu w folderze [vuejs-xx] projektu;
• testujemy ten projekt za pomocą polecenia [vue-cli-service serve vuejs-xx/main.js] w pliku [package.json];

Po uruchomieniu serwera deweloperskiego każda zmiana w jednym z plików projektu powoduje ponowną kompilację. Z tego powodu wyłączamy tryb [Auto Save] w [VSCode]. Nie chcemy bowiem, aby kompilacja odbywała się za każdym razem, gdy wpisujemy znaki w jednym z plików projektu. Chcemy, aby rekompilacja odbywała się tylko w określonych momentach:

• w [2] opcja [Auto Save] nie może być zaznaczona;