8 Июня 2018 JavaScript Перевод

Узнайте, как использовать Vue.js CLI

img

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

Одна из них - Vue Command Line Interface (CLI).

Примечание: Сейчас происходит переделка CLI со 2 до 3 версии. Версия 3 пока не стабильная, но я буду описывать её, потому что в ней много улучшений по сравнению со 2 версией.

Установка

Vue CLI – утилита командной строки, поэтому её устанавливают глобально с помощью npm:

npm install -g @vue/cli

или с использованием yarn:

yarn global add @vue/cli

Как только вы это сделаете, сможете вызвать команду vue.

image

Какие возможности предоставляет Vue CLI?

CLI необходим для быстрой разработки на Vue.js.

Его основная цель – убедиться, что необходимые инструменты работают, чтобы выполнять заданные функции. Он абстрагирует все необходимые детали конфигурации, используя каждый инструмент в отдельности.

CLI выполняет первоначальную настройку проекта и создаёт каркас приложения.

Это гибкий инструмент. Создав проект с помощью CLI, можно настроить конфигурацию без необходимости извлечения приложения (как бы вы делали с create-react-app). Можно настроить что угодно и с лёгкостью обновлять настройки.

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

Как использовать CLI для создания нового проекта Vue

Первое, что нужно сделать при помощи CLI – создать Vue.js приложение:

vue create example

Самое приятное, что это интерактивный процесс. Вам будет предложено выбрать пресет. По умолчанию существует один пресет, обеспечивающий интеграцию с Babel и ESLint:

image

Я собираюсь нажать стрелку вниз и вручную выбрать функции, которые мне нужны:

image

Нажимайте пробел на каждой нужной вам функции, а затем нажмите Enter, чтобы продолжить. Поскольку я выбрал «Linter / Formatter», Vue CLI предлагает мне конфигурацию. Я выберу «ESLint + Prettier», так как это моя любимая настройка:

image

Следующим шагом является выбор того, как применять linting. Я выбрал «Lint on save».

image

Далее – тестирование. Я выбрал тестирование, и Vue CLI предложил мне два самых популярных решения на выбор: «Mocha + Chai» и «Jest».

image

Vue CLI спрашивает, где разместить конфигурацию. На выбор два варианта размещения: в файле «package.json» или в специализированных файлах конфигурации, по одному для каждого инструмета. Я выбрал последний.

image

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

image

Далее Vue CLI спрашивает меня, предпочитаю ли я yarn или npm:

image

и это последнее, о чём он меня спрашивает. Затем он переходит к загрузке зависимостей и созданию Vue приложение:

image

Как запустить только что созданное Vue CLI приложение

Vue CLI создал для нас приложение, и теперь можно зайти в папку «example» и запустить yarn serve для старта нашего первого приложения в режиме разработки:

image

В папке созданного приложения содержится несколько файлов, включая «package.json»:

image

В «package.json» определяются все команды CLI, в том числе yarn serve, которую мы использовали выше, а также следующие команды:

  • yarn build, для запуска сборки на продакшн
  • yarn lint, для запуска linter
  • yarn test:unit, для запуска юнит тестов.

Я опишу пример приложения, сгенерированного с помощью Vue CLI, в отдельном учебнике.

Git репозиторий

Обращали ли вы внимание на слово master в левом нижнем углу VS Code? Оно там потому, что Vue CLI автоматически создаёт репозиторий и совершает первый коммит. Мы можем двигаться дальше, менять что-то, и всегда знать, что мы изменили:

image

Это довольно круто.

Используйте пресет из командной строки

Вы можете пропустить интерактивную панель и сообщить Vue CLI, что хотите использовать конкретный пресет:

vue create -p favourite example-2

Где хранятся пресеты

Пресеты хранятся в файле «.vuejs» в домашнем каталоге. Вот так выглядит этот файл после создания моего первого «любимого» пресета:

{
 "useTaobaoRegistry": false,
 "packageManager": "yarn",
 "presets": {
   "favourite": {
     "useConfigFiles": true,
     "plugins": {
       "@vue/cli-plugin-babel": {},
       "@vue/cli-plugin-eslint": {
         "config": "prettier",
         "lintOn": [
           "save"
         ]
       },
       "@vue/cli-plugin-unit-jest": {}
     },
     "router": true,
     "vuex": true
   }
 }
}

Плагины

После прочтения файла конфигурации вы увидите, что пресет представляет собой набор плагинов с некоторой дополнительной конфигурацией.

После создания проекта можно добавлять дополнительные плагины, используя vue add:

vue add @vue/cli-plugin-babel

Все эти плагины используются в самой последней версии. Но можно заставить Vue CLI использовать определённую версию, передав её как свойство:

"@vue/cli-plugin-eslint": {
 "version": "^3.0.0"
}

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

Удалённое хранение пресетов

Пресет может храниться в GitHub (или на других сервисах), в созданном репозитории, содержащим файл «preset.json». Этот файл содержит одну предварительно настроенную конфигурацию.

Я разместил образец своего пресета в https://github.com/flaviocopes/vue-cli-preset/blob/master/preset.json, он содержит следующую конфигурацию:

{
 "useConfigFiles": true,
 "plugins": {
   "@vue/cli-plugin-babel": {},
   "@vue/cli-plugin-eslint": {
     "config": "prettier",
     "lintOn": [
       "save"
     ]
   },
   "@vue/cli-plugin-unit-jest": {}
 },
 "router": true,
 "vuex": true
}

Его можно использовать для создания нового приложения, просто введите в консоль:

vue create --preset flaviocopes/vue-cli-preset example3

Другое использование Vue CLI: быстрое прототипирование

Выше, я объяснил, как использовать Vue CLI для создания нового проекта с нуля, со всеми наворотами и прибамбасами. Но для действительно быстрого прототипирования вы можете создать простое приложение на Vue – которое будет автономным в одном файле .vue, не загружая все зависимости в папку node_modules.

Как? Сначала установите глобальный пакет cli-service-global:

npm install -g @vue/cli-service-global 
//или yarn 
global add @vue/cli-service-global

Создайте «app.vue» файл:

<template>
   <div>
       <h2>Hello world!</h2>
       <marquee>Heyyy</marquee>
   </div>
</template>

и затем запустите

vue serve app.vue

image

Вы обслужите больше проектов, составленных из файлов JavaScript и HTML. По умолчанию Vue CLI использует в качестве точки входа «main.js» / «index.js». У вас также есть «package.json» и любая конфигурация инструментов.

Этот метод использует глобальные зависимости, из-за этого он не является оптимальным подходом для чего-то большего, чем демонстрация или тестирование.

Запуск команды vue build подготовит проект для развертывания и сгенерирует файлы JavaScript в папке dist/, чтобы проект был готов к продакшн. Предупреждения, которые Vue.js генерирует во время разработки, удаляются, а код оптимизирован для использования в реальном мире.

Webpack

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

image

Оригинал: Learn how to use the Vue.js CLI