#2 — Изучаем Vue CLI (Comand Line Interface)

NodeJS

NodeJS позволяет запускать приложения, написанные на JavaScript на сервере (без браузера).

npm

npm — это менеджер пакетов для Javascript, написанный на NodeJs.

Установка NodeJS с npm на Windows

Устанавливает LTS версию, как обычную программу.

Проверим, что все установилось в консоли:

C:\Users\Дмитрий>node -v
v14.15.0

C:\Users\Дмитрий>npm -v
6.14.8

Если нет, то перезагрузите ПК.

Установка NodeJS с npm на Linux

Можно посмотреть в интернете https://losst.ru/ustanovka-node-js-na-centos-8.

Vue CLI

Установка

https://cli.vuejs.org/ru/

npm install -g @vue/cli

Здесь флаг -g обозначает, то, что мы устанавливаем cli в глобальную папку npm и будет доступна глобально. У нас он установился по адресу: c:\Users\Дмитрий\AppData\Roaming\npm\node_modules\@vue\cli\

Создание проекта

Создаем папку g:\OpenServer\domains\vue-projects\ и заходим в нее через командную строку:

cd /d g:\OpenServer\domains\vue-projects\

Babel

Babel компилирует код JavaScript ES6 в ES5 для поддержки старыми браузерами.

EsLint

Позволяет находить проблемы в коде, не запуская его.

Выбираем preset:

Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

Выберем vue 2.

Выполняем команды, указанные после установки:

cd learn
npm run serve

После выполнения второй:

 DONE  Compiled successfully in 2849ms                                                                          15:37:20

  App running at:
  - Local:   http://localhost:8081/
  - Network: http://192.168.100.2:8081/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

Переходим на http://localhost:8081/ — там будет наш новый созданный проект.

vue inspect — конфиг проекта vue

Чтобы посмотреть конфиг нашего проекта пишем:

vue inspect

Запишем ее в файл webpack.js:

vue inspect > webpack.js

Обзор скомпилированного проекта

webpack.js

Это сборщик, инструмент, который позволяет скомпилировать javascript модули в один выходной js файл.

package.json

В этом файле записаны инструменты, которые мы используем и диапазон их версий (3.1 и выше допустим)

package-lock.json

В этом файле записаны инструменты, которые мы используем и их точные версии.

README.md

Текстовый файл с некоторыми часто встречающимися командами.

Папка node_modules

Содержит все наши наши пакеты, которые мы используем в проекте и их зависимости.