2. Створення робочого середовища

Ми використовуємо робоче середовище, детально описане в документі [2]:

Visual Studio Code (VSCode) для написання коду JavaScript;
[node.js] для їх виконання;
[npm] — для завантаження та встановлення бібліотек JavaScript, які нам знадобляться;

Створюємо робоче середовище у [VSCode]:

у [1-5] ми відкриваємо порожню папку [vuejs] у [VSCode];

у [8-10] встановлюємо залежність [@vue/cli], яка дозволить нам ініціалізувати проект [vue.js]. Ця залежність приносить велику кількість пакетів (кілька сотень);

У тому ж терміналі потім вводимо команду [vue create .], яка вимагає створити проект [vue.js] у поточній папці (.) :

у [13] розпочинається серія запитань, які слугують для налаштування проєкту;

після надання відповідей на всі запитання завантажуються нові пакети та створюється проект у поточній папці [14].

Давайте подивимося, що було згенеровано. Файл [package.json] має такий вигляд:


{
  "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"
  ]
}

Коментарі

рядки 14–22: серед залежностей, необхідних для розробки, містяться посилання на два інструменти [eslint, babel], які вже використовувалися у двох попередніх розділах. До них додаються плагіни цих двох інструментів, призначені для використання в рамках [vue.js];
рядок 34: саме пакет [babel-eslint] здійснюватиме транспіляцію коду jS з ES6 у ES5;
рядки 5–9: було створено три завдання [npm]:
- [build]: призначене для створення скомпільованої версії проєкту, готової до запуску в виробництво;
- [serve]: запускає проект на веб-сервері. Саме за допомогою цього інструменту проводяться тестування під час розробки. Як і у випадку з [webpack-dev-server], зміна вихідного коду проекту автоматично спричиняє його перекомпіляцію та перезавантаження веб-сервером;
- [lint]: слугує для аналізу кодів jS та формування звітів. У даному випадку ми не використовуватимемо цей інструмент;

Було згенеровано файл [README.md] із таким вмістом:

# vuejs

## Налаштування проєкту
```
npm install
```

### Компіляція та гаряче оновлення для розробки
```
npm run serve
```

### Компіляція та мінімізація для виробничого середовища
```
npm run build
```

### Запуск тестів
```
npm run test
```

### Перевірка та виправлення файлів
```
npm run lint
```

### Налаштування конфігурації
See [Configuration Reference](https://cli.vuejs.org/config/).

Цей файл містить перелік команд, які слід використовувати для управління проєктом.

Ми знаємо, що у файлі [VSCode] для виконання пропонуються завдання [npm]:

у [1-3] ми виконуємо команду [serve], яка скомпілює, а потім виконає проект [4-5];

Після виконання URL та [http://localhost:8080] ми отримуємо таку сторінку:

Трохи далі ми пояснимо, що призвело до появи цієї сторінки.

Продовжимо налаштовувати наше робоче середовище:

у [2] вище ми бачимо індикатори [git]. [git] — це менеджер вихідного коду, що дозволяє керувати послідовними версіями коду та обмінюватися ними між розробниками. Ми вимкнемо цей інструмент для проекту;
у [3-5] перейдемо до властивостей проєкту;

у [9-10] вимкнемо використання [git] у проєкті;

Ми напишемо різні тести, щоб продемонструвати роботу [vue.js]. Однак ми не хочемо щоразу створювати новий проєкт, оскільки тоді доведеться щоразу генерувати папку [node_modules], а її розмір становить кілька сотень мегабайтів. Повернемося до завдань [npm] у файлі [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"
  },

рядок 2: команда [serve] за замовчуванням використовує:
- файл [public/index.html];
- пов'язаний із файлом [src/main.js];

У рядку 2 можна вказати для команди [serve] точку входу в проект, наприклад:


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

Спробуємо:

у [1] папка [src] була перейменована на [vuejs-00];
у [2-3] було змінено команду [serve];
у [4-6] виконується проект;

Отримуємо той самий результат, що й раніше:

Отже, для наших тестів ми будемо діяти таким чином:

запишемо код у папку [vuejs-xx] проекту;
тестування цього проєкту за допомогою команди [vue-cli-service serve vuejs-xx/main.js] у файлі [package.json];

Коли сервер розробки запущений, будь-яка зміна в одному з файлів проєкту спричиняє перекомпіляцію. З цієї причини ми вимикаємо режим [Auto Save] у [VSCode]. Адже ми не хочемо, щоб відбувалася перекомпіляція щоразу, коли ми вводимо символи в один із файлів проєкту. Ми хочемо, щоб перекомпіляція відбувалася лише в певні моменти:

у [2] опція [Auto Save] не повинна бути відмічена;