Создание приложений с помощью Vue CLI

У большинства JavaScript- фреймворков есть интерфейс командной строки (CLI). Но они достаточно сложные для понимания, поскольку некоторые команды могут принимать большое количество параметров и флагов.

В Vue CLI появился графический пользовательский интерфейс (GUI), который поможет сэкономить много времени.

Ресурсы

  • Базовый уровень понимания JavaScript и Vue.JS;
  • Должен быть установлен NodeJS.

Установка

Установите Vue CLI 3.

npm i -g @vue/cli

Набрав vue в терминале, вы получите результат, приведенный ниже.

vue

  Usage: vue <command> [options]

  Options:

    -V, --version                         output the version number
    -h, --help                            output usage information

  Commands:

    create [options] <app-name>           create a new project powered by vue-cli-service
    add <plugin> [pluginOptions]          install a plugin and invoke its generator in an already created project
    invoke <plugin> [pluginOptions]       invoke the generator of a plugin in an already created project
    inspect [options] [paths...]          inspect the webpack config in a project with vue-cli-service
    serve [options] [entry]               serve a .js or .vue file in development mode with zero config
    build [options] [entry]               build a .js or .vue file in production mode with zero config
    ui [options]                          start and open the vue-cli ui
    init [options] <template> <app-name>  generate a project from a remote template (legacy API, requires @vue/cli-init)
    config [options] [value]              inspect and modify the config


  Run vue <command> --help for detailed usage of given command.

Скаффолдинг приложения на Vue

Создайте каталог для размещения Vue-приложения. В моем случае он называется vue-ui. mkdir vue-ui Затем запустите Vue UI с помощью приведенной ниже команды. vue ui Данная команда открывает Vue GUI по адресу http://localhost:8001 в браузере, который используется в системе по умолчанию.

Скаффолдинг приложения на Vue

Эти три раздела интуитивно понятны, но мы все же уточним их назначение:

  • Projects – список проектов.
  • Create – позволяет создать новый проект на основе Vue.
  • Import – позволяет импортировать проект из каталога или из удаленного репозитория, расположенного на github.

В нижней части экрана, в строке статуса показывается расположение текущего каталога.

Создадим проект. Кликните по вкладке «Create» и нажмите кнопку «Create a new project here».

Скаффолдинг приложения на Vue - 2

Появится всплывающее окно. Назовем проект scotch-vue.

Выберите npm в качестве менеджера пакетов, используемого по умолчанию, и инициализируйте git-репозиторий.

Нажмите «Next», чтобы перейти к шаблонам. Здесь задайте базовые конфигурации Vue-приложения. Выберите пункт «Manual» и нажмите «Next».

Если у вас есть сохраненные пресеты, они появятся на этой странице и их можно будет выбрать. Ниже показан пресет scotch-vue и пресет all-settings, которые я создал ранее.

Далее перейдите на страницу «Features», чтобы активировать нужные плагины. Я использовал следующие конфигурации: Babel, Router, CSS Preprocessor, Linter/Formatter, Unit Testing, Use Config Files.

У всех параметров есть ссылка «More Info», которая ведет в справочный раздел.

Нажмите «Next, чтобы настроить конфигурации функций, добавленных в предыдущем разделе.

Выберите SCSS/SASS в качестве препроцессоров.

Я использовал инструменты ESLint + Prettier, а также выбрал опцию «lint on save».

Затем выберите инструмент для модульного тестирования: Mocha и Chai.

Кликните по кнопке «Create Project». После этого задайте имя пресету: scotch-vue-preset. В следующий раз можно будет создать проект прямо из этого пресета.

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

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

Панель управления проектом

Панель управления разделена на четыре части:

1. Plugins

Список установленных плагинов и доступных для установки.

Plugins

Для поиска новых плагинов нажмите кнопку «Install Plugins», расположенную в правом верхнем углу.

Plugins - 2

2. Dependencies

Здесь отображается список npm-зависимостей и позволяет добавлять или удалять их.

Dependencies

Чтобы активировать поиск и установку зависимостей, нажмите кнопку «Install Dependencies», расположенную в правом верхнем углу.

Dependencies - 2

3. Configurations

Позволяет настраивать конфигурацию приложений.

Конфигурации Vue CLI

Конфигурации Vue CLI

Конфигурации Eslint

Конфигурации Eslint

4. Tasks

Операции с приложением, которые выполняются в процессе его создания:

  • Serve – компилирование и перезагрузка.
  • Build – компилирование и минификация для продакшена.
  • Lint – проверяет и исправляет ошибки в файлах;
  • Test – выполняет тесты, используя Mocha;
  • Inspect – инспектирует webpack и конфигурацию.

Данные задачи перечислены в соответствии с нашей конфигурацией. Например, задача E2E не была упомянута.

Serve

Этот раздел компилирует и поддерживает горячую перезагрузку для разработки. Первая часть раздела Serve позволяет настроить задачу.

Serve

Кнопка «More info» открывает документацию по vue-cli-service. После нажатия на кнопку «Run Task» приложение откроется в новой вкладке.

Serve - 2

Вкладка «Dashboard Tab»

На этой вкладке выводится статистика по пакету приложений. Изучите ее, чтобы увидеть размеры и скорость загрузки файлов.

Вкладка «Dashboard Tab»

Вкладка «Output»

В этой вкладке отображаются логи с данными о процессе выполнения задачи.

Вкладка «Output»

Analyzer

Анализирует код и создает график, демонстрирующий различные зависимости кода.

Analyzer

Build

Раздел Build почти аналогичен разделу Serve. Разница только в том, что в Build создается пакет, который можно использовать для развертывания приложения.

Build

При нажатии на иконку шестеренки откроется окно, позволяющее указать среды, вывести каталоги и выбрать тип приложения.

Build - 2

Обратите внимание на то, как изменился анализатор.

Lint

Анализирует код.

Lint

test:unit

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

test:unit

Inspect

Создает конфигурацию пакета в файле формата json.

Inspect

Заключение

Мы узнали, как создается новое приложение на основе VueJS с помощью инструмента Vue UI. Надеемся, что этот инструмент вам пригодится.

Также можете изучить исходный код пользовательского интерфейса Vue CLI.