Ускорение рабочего процесса при работе Vue.js с помощью Vue CLI 3

Мы вряд ли можем себе представить современную веб-разработку, не используя инструментов командной строки (CLI). Они значительно облегчают и ускоряют процесс разработки путем сокращения количества выполняемых повторяющихся и трудоемких задач. Настройка проекта вручную, включая проверку, сборку, тестирование, предварительную обработку и оптимизацию кода с возможностью отслеживания зависимостей, не похоже на увлекательную работу, не так ли?

Вот почему все современные фронтенд-фреймворки (например, Angular, React и т.д.) предлагают собственные инструменты для работы в командной строке, и Vue.js здесь не исключение. Но с выходом последней третьей версии, Vue CLI сделал один шаг вперед, чтобы быть впереди остальных. Теперь он не только очень мощный и гибкий, но также поставляется с полноценным GUI. Да, вы всё правильно поняли: Vue CLI 3 предлагает настоящий графический интерфейс из коробки.

Создание новых проектов на Vue.js теперь проще, чем когда-либо с новой версией Vue CLI и его пользовательским интерфейсом (Vue UI GUI). Эта обучающая статья покажет вам, как вы установить Vue CLI и как Vue UI может ускорить рабочий процесс еще больше. Давайте начнем!

Что такое Vue CLI?

Vue CLI представляет собой набор инструментов для быстрого прототипирования, легкого создания новых приложений и эффективного управления проектами на Vue.js. Он состоит из трех основных инструментов:

• CLI представляет собой глобально установленные npm-пакет, обеспечивающий основной функционал через команду vue. Она позволяет нам легко создать новый проект (vue create), или просто быстро сделать прототип первоначальных идей (vue serve). Если мы хотим более конкретный и визуальный контроль над нашими проектами, то можем открыть графическую (GUI) версию из-под командной строки, выполнив команду vue ui.
• Сервис CLI (CLI Service) — зависимость для разработки (бинарный файл vue-cli-service), установленная локально на каждый проект, созданный при помощи CLI. Она позволяет нам разрабатывать проект (vue-cli-service serve), собрать его для продакшен  (vue-cli-service build), а также проверить конфигурацию проекта внутри webpack (vue-cli-service inspect).
• Плагины CLI (CLI Plugins) — это npm-пакеты, предоставляющие дополнительные возможности для наших проектов. Их имена начинаются либо с @vue/cli-plugin- (для встроенных плагинов), либо vue-cli-plugin- (в случае плагинов сообщества). Мы можем добавить их в любое время процесса разработки через команду vue add.

В следующих разделах мы будем исследовать первоначальные азы вышеуказанных инструментов и утилит, но для начала давайте посмотрим на практические аспекты, которые делают Vue CLI таким мощным и гибким.

Vue CLI — полнофункциональная система для ускорения нашего процесса разработки приложений на Vue.js

Vue CLI ускоряет и облегчает разработку проекта на Vue.js  благодаря внушительному набору функциональных возможностей. Давайте посмотрим, что это за возможности:

• Архитектура на основе плагинов. Vue CLI полностью работает на плагинах, что делает его очень гибким и расширяемым. Мы можем выбрать, какие из встроенных плагинов нужны во время процесса создания нового проекта. Но мы не ограничены только этим, мы можем добавить любое количество плагинов в любой момент после создания проекта.
• Vue CLI полностью настраиваемый, расширяемый и обновляемый инструмент.
• Набор официальных предустановленных плагинов, который объединяет профессиональные инструменты экосистемы фронтенда (Babel, ESLint, TypeScript, PWA, Jest, Mocha, Cypress и Nightwatch).
• Один по умолчанию пресет, который мы можем изменить в соответствии с нашими потребности во время создания проекта или после этого.
• Не нужно использовать извлечение зависимостей (eject). В отличие от CLI-инструментов React и Angular мы можем безопасно проверить и настроить конфигурацию webpack нашего проекта в любое время после создания без необходимости извлечения зависимостей приложения и переключения на ручной способ управления его конфигурации.
• Поддержка мультистраниц.
• Мгновенное создание прототипов без необходимости в какой-либо конфигурации.
• Различные версии проекта позволяют нам создать разные версии проекта, мы можем использовать одну и ту же кодовую базу для того, чтобы использовать её как приложение, библиотеку или веб-компоненты.
• Режим использования современных возможностей. Это означает, что мы можем собирать наше приложение для современных браузеров, но с автоматической поддержкой для старых. Круто, да?
• Полномасштабный графический интерфейс для создания, обновления и управления сложными проектами без каких-либо трудностей.
• API для пользовательского интерфейса плагинов. Vue UI предоставляет API для плагинов, который мы можем использовать для добавления собственных функциональных возможностей к GUI-версии версии командной строки.
• Много полезных плагинов от сообщества.

Начало работы с Vue CLI

После того, как мы узнали о магии Vue CLI, пришло время, чтобы увидеть её на практике. Для начала нам нужно установить Vue CLI 3. Это потребует Node.js 8.9+ (рекомендуется версия 8.11.0 или новее), поэтому мы должны убедиться, что на наших машинах установлена правильная версия. Затем мы открываем терминал или командную строку и выполняем следующую команду:

1

npm install -g @vue/cli

После завершения установки, мы можем начать с помощью команды vue. Чтобы проверить, что всё работает корректно, мы запускаем vue --version. Выполнение этой команды должно отобразить установленную версию Vue CLI. Теперь давайте посмотрим, что мы можем в действительности сделать с Vue CLI.

Мгновенное создание прототипов

Даже несмотря на то, что Vue CLI предназначен главным образом для работы со сложными проектами, этот инструмент всё равно позволяет нам попробовать наши первые идеи, быстро и без особых усилий. Возможность мгновенного прототипов может быть активирована, если установлен глобальный пакет Vue CLI Service:

1

npm install -g @vue/cli-service-global

Теперь мы можем использовать команду vue serve, каждый раз, когда нам она потребуется. Давайте попробуем! Создадим файл App.vue со следующим содержимым:

1

<template>

2

  <h1>Hello, Vue!</h1>

3

</template>

Затем в той же директории выполняем:

1

vue serve

Запуститься сервер разработки Vue CLI и можно открыть наше приложение по URL-адресу http://localhost:8080/. Когда мы откроем браузер по данному адресу, мы увидим дружелюбный заголовок Hello, Vue!.

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

Предыдущий раздел был только разминкой. Теперь давайте сделаем что-то более сложное.

Команда vue create использует интерактивный процесс для выбора вариантов, чтобы создать новый проект. Давайте выполним её и пройдем через весь процесс создания.

1

vue create vuecli-project

Создание нового проекта с Vue CLI

В первом окне нам предлагается выбрать пресет. Существует только один пресет из коробки, под названием default. Мы выберем второй вариант, с помощью которого мы сможем вручную выбрать компоненты, необходимые для нашего проекта, далее нажмите клавишу Enter, чтобы продолжить.

В следующем окне мы используем клавиши со стрелками для перемещения вверх и вниз по списку возможностей, а также пробел, чтобы выбрать то, что мы хотим. Прямо сейчас наряду с уже выбранным Babel и Linter/Formatter, я также выбрал Router и Vuex. После того как вы выбрали необходимые возможности, нажмите Enter, чтобы перейти к следующему шагу.

В следующем окне нас спрашивают, следует ли использовать режим истории в маршрутизаторе. Я просто нажал Enter, чтобы выбрать значение по умолчанию Yes.

В следующем окне, нам нужно выбрать, как мы хотим настроить Linter. Я выбрал ESLint + Prettier.

В следующем окне мы выбираем, когда используется Linter для проверки проекта. Я выбрал Lint on save, что означает, что проверка применяется каждый раз, когда сохраняется файл.

В следующем окне мы должны решить, как мы хотим настроить наш проект. Выберите, хотите ли вы использовать собственные конфигурационные файлы для каждой из возможности, или включить все параметры конфигурации в файл package.json. Я предпочитаю хранить всё в одном файле, поэтому выбираю вариант с package.json.

В последнем окне у нас есть возможность сохранить всю конфигурацию в виде простого в использовании пресета для создания будущих проектов. Я сохранил свою как spa-simple. Пресеты сохраняются в директории пользователя внутри файла .vuerc.

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

Изучение структуры проекта

В этом разделе мы рассмотрим, что Vue CLI создал для нас.

В директории проекта выше показано, что у нас есть следующие файлы и директории:

• Директория node_modules содержит пакеты, которые требуют приложение и инструменты разработки.
• Директория public содержит статические ресурсы проекта, которые не будут включены при создании сборки проекта.
• В директории src содержится приложение Vue.js со всеми ресурсами.
• Файл .gitignore содержит список файлов и папок, которые не учитываются системой управления версиями Git.
• Файл babel.config.js содержит параметры конфигурации компилятора Babel.
• Файл package.json содержит список пакетов, необходимых для разработки на Vue.js, а также команды, используемые для инструментов разработки.
• Файл package-lock.json содержит полный список пакетов, необходимых в рамках проекта и их зависимостей.
• Файл README.md содержит общую информацию о проекте.

Недавно созданная директория src

Давайте теперь взглянем на директорию src:

В директории src, которая показана выше, есть следующие файлы и директории:

• Директория assets используется для статических ресурсов, необходимых приложению и которые будут включены в процессе сборки.
• Директория components используется для компонентов приложения.
• Директория views используется для компонентов, которые будут отображаться с помощью возможности маршрутизации URL-адресов.
• Файл App.vue — корневой компонент.
• Файл main.js — это файл JavaScript, который создает объект экземпляра Vue.
• Файл router.js используется для настройки маршрутизатора Vue.
• Файл store.js используется для настройки хранилища данных, созданного с помощью Vuex.

Изменение конфигурации проекта

Конфигурация проекта по умолчанию содержит разумные значения параметров, которые, если нужно, доступны для изменения, путем создания файла vue.config.js в директории проекта, или путем добавления секции vue в файле package.json. Давайте попробуем первый вариант: создадим файл vue.config.js и добавим следующий код:

1

module.exports = {

2

  runtimeCompiler: true

3

}

Это позволит компонентам определять свои шаблоны как строки, а не использовать элементы template. Получить сведения о полном наборе параметров конфигурации, доступные для использования, можно на странице Vue CLI Config.

Разработка проекта

Как мы видели выше, CLI Vue Service поставляется по умолчанию с тремя скриптами: serve, build и inspect. Первый из них используется во время разработки. Мы запускаем наш проект с помощью команды npm run serve:

Когда мы открываем приложение в браузере, мы увидем следующую страницу:

Это страница Home.vue, которая использует компонент HelloWorld.vue.

Команда serve запускает сервер разработки, работающий от пакета webpack-dev-server, с функцией горячей перезагрузкой модулей (HMR). Это означает, что когда мы внесем изменения в файлы компонентов и сохраним их, изменения немедленно будут показаны, т.е. страница будет обновлена в браузере.

Добавление нового функционала в проект при помощи плагинов Vue CLI

В какой-то момент разработки приложения нам может потребоваться добавить некоторые дополнительные возможности в проект, и для этого нам потребуется установить плагины Vue CLI. Плагин Vue CLI может изменить конфигурацию webpack и вводить новые команды в vue-cli-service. Для установки плагина используем команду vue add.

Давайте предположим, что мы хотим использовать  компоненты Bootstrap для нашего проекта. К счастью, есть плагин bootstrap-vue, который может предоставить их. Чтобы установить его, выполняем следующую команду:

1

vue add bootstrap-vue

После установки плагина в директории src, мы найдем новую директорию plugins, в которой будет размещен новый плагин.

Теперь, чтобы проверить работу плагина, изменим файл About.vue:

1

<template>

2

  <div class="about">

3

    <b-jumbotron text-variant="success" header="Vue CLI 3" lead="Standard Tooling for Vue.js Development">

4

        <p>For more information visit website</p>

5

      <b-btn variant="primary" href="https://cli.vuejs.org/">More Info</b-btn>

6

    </b-jumbotron>

7

  </div>

8

</template>

И когда мы указываем страницу About в браузере, мы увидим, что страница обновилась и стилизована с помощью Bootstrap:

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

Когда приложение готово к деплою, необходимо создать набор бандлов, содержащие только код приложения и содержимое, а также модули, от которых они зависят, чтобы эти файлы можно было развернуть на рабочем HTTP-сервере.

Сборка приложения

Для сборки приложения выполняем следующую команду:

1

npm run build --modern

Аргумент --modern создает две версии приложения. Одна из них предназначена для современных браузеров, которые поддерживают последние возможности JavaScript, а другая является запасным вариантов для старых браузеров, которым требуются дополнительные библиотек для работы этих новых возможностей. Круто то, что после того, как мы развертываем приложение, выбор конкретной версии будет полностью автоматический, магия!

Примечание: Когда мы выполним команду build, во Vue CLI доступна опция --target, которая позволяет нам использовать нашу кодовую базу для различных случаев использования. Вариант по умолчанию установлен для сборки приложения. У нас есть еще два варианта на выбор: использовать код в виде библиотеке, либо в качестве веб-компонентов. Посмотрите страницу Build Targets для получения дополнительной информации.

Изучение директории dist

После завершения процесса сборки, в корневой директории проекта создается директория dist. Давайте посмотрим на её содержимое:

Файл index.html будет точкой входа для приложения. Он содержит элементы link и script, которые будут загружать все необходимые CSS- и JavaScript-файлы из директорий css и js.

Так что теперь мы готовы для деплоя приложения на продакшен-сервере. Есть много вариантов на выбор. Вы можете узнать о многих из них, посетив страницу Deployment.

Давайте сделаем GUI-версию нашего проекта при помощи Vue UI

Vue CLI 3 — очень мощный, но имеет свою цену. Есть слишком много вариантов, команд и параметры для настройки, чтобы запомнить все их. Это делает его более сложным и трудным для работы. Чтобы прийти в состояние "просто и легко" Гийом Чау (Guillaume Chau) создал Vue UI, который значительно упрощает процесс разработки и делает его более доступным. Сначала он может показаться немного странным, чтобы объединить CLI-инструмент с графическим интерфейсом, но как вы увидите позже, этот необычный симбиоз является довольно мощный и эффективный.

Воссоздание нашего проекта с помощью Vue UI

В этом разделе мы рассмотрим создание одного и то же проекта, который мы создали раньше, но на этот раз мы будем использовать Vue UI.

Vue UI выполнен при помощи собственного UI-фреймворк, и для его запуска в браузере Electron не требуется. Просто выполните команду vue ui, не имеет значения, в какой директории:

1

vue ui

Менеджер проектов Vue (Vue Project Manager) запускается с выбранной вкладкой Projects. Там еще нет существующих проектов. Чтобы перечислить некоторые нам нужно создавать их через пользовательский интерфейс или импортировать проекты, созданные с CLI. Давайте посмотрим, как мы можем создать новый проект.

Мы переключаеися на вкладку Create, переходим в нужную директорию для нашего приложения и нажимаем кнопку Create a new project here.

На следующем экране мы указываем имя директории проекта и выбираем нужный менеджер пакетов.

На следующем экране мы можем пресет для проекта. Это может быть пресет по умолчанию, manual, remote, либо пользовательский пресет, который мы создали раньше. Пресет spa-simple является примером пользовательского пресета. Здесь мы выбираем Manual.

На следующем экране мы выбираем плагины, которые мы хотим установить.

Наконец мы устанавливаем параметры конфигурации для плагинов, которые мы выбрали для установки. Когда мы готовы, нажимаем на кнопку Create Project.

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

Использование панели управления проекта Vue UI

В разделе Plugins перечислены все установленные плагины. Чтобы установить новый плагин нажимаем кнопку Add plugin.

Здесь мы можем найти плагин, который нам нужен, и когда мы его найдем, кликаем на кнопку Install. В нашем случае мы ищем и устанавливаем плагин bootstrap-vue.

Когда плагин установлен, на вкладке Configuration, мы можем установить предоставленные параметры.

На вкладке Files changed можно проверить, какие файлы изменяются и каким образом. Здесь я не хочу вносить каких-либо изменения, поэтому я нажимаю на кнопку Skip.

В разделе Dependencies мы перечислили все основные зависимости, а также те, которые предназначенные для разработки. Чтобы добавить зависимости нажимаем кнопку Install dependency.

В модальном окне мы можем найти основные зависимости или зависимости разработки, и установить их.

В разделе Configuration мы можем настроить параметры, предоставленные для добавленных плагинов. Здесь у нас есть параметры для плагина Vue CLI, а также для плагина ESLint.

Раздел Tasks дает нам удобный способ использования всех доступных команд из Vue CLI и от других плагинов. В этом экране выбрана задача serve. Мы можем изменить его параметры, нажав кнопку Parameters.

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

Когда мы запустить задачу serve, панель управления будет обновлена.

Когда мы перейдем на вкладку Output, мы получим логи  задачи.

Когда мы перейдем на вкладку Analyzer, мы получаем красивый график, который обощает информацию для всего проекта.

Задача build почти похожа на задачу serve за исключением того, что первая создает бандл для продакшена, который может использоваться для деплоя приложения.

Мы можем установить параметры для задачи сборки (build) так, как и для задачи serve.

Поле Output задачи inspect даёт нам информацию о полученной конфигурации webpack.

И это всё. Мы успешно воссоздали наш проект с помощью Vue UI. Но, как мы видели, процессы создания и настройки проще и гораздо боле приятные, когда мы используем GUI.

Заключение

В этой обучающей статье мы узнали, что Vue CLI является полноценной системой для современной веб-разработки. Этот инструмент позволяет нам быстро и легко работать  со всей экосистемой Vue и сторонними инструментами для него. Конечно, мы не обязаны использовать Vue CLI для наших проектов на Vue.js. Это полностью на ваш выбор. Но когда мы стремимся к скорости и качеству, Vue CLI приходит, чтобы помочь в создании, управлении и деплое наших проектов на профессиональном уровне.