Создание приложений с помощью 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 в браузере, который используется в системе по умолчанию.

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

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

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

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

Появится всплывающее окно. Назовем проект 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

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

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

2. Dependencies

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

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

3. Configurations

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

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

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

4. Tasks

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

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

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

Serve

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

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

Вкладка «Dashboard Tab»

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

Вкладка «Output»

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

Analyzer

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

Build

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

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

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

Lint

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

test:unit

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

Inspect

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

Заключение

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

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

Данная публикация представляет собой перевод статьи «Create Vue Apps Visually with the Vue CLI User Interface Tool» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню