Рубрики
Без рубрики

Тот Vue.js CLI: узнайте, как его использовать

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

  • Установка
  • Что предоставляет интерфейс командной строки Vue?
  • Как использовать интерфейс командной строки для создания нового проекта Vue
  • Как запустить только что созданное приложение Vue CLI
  • Репозиторий Git
  • Используйте набор настроек из командной строки
  • Где хранятся предустановки
  • Плагины
  • Удаленное сохранение настроек
  • Другое использование интерфейса командной строки Vue: быстрое прототипирование
  • Веб-пакет

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

Одним из них является интерфейс командной строки Vue.

CLI означает интерфейс командной строки.

Примечание: Сейчас идет огромная доработка интерфейса командной строки, переход от версии 2 к версии 3. Хотя она еще не стабильна, я опишу версию 3, потому что это огромное улучшение по сравнению с версией 2 и совсем другое.

Установка

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

npm install -g @vue/cli

или с помощью пряжи:

yarn global add @vue/cli

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

Что предоставляет интерфейс командной строки Vue?

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

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

Он может выполнить первоначальную настройку проекта и монтаж строительных лесов.

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

Когда вы извлекаете из приложения create-react-app, вы можете обновлять и настраивать то, что хотите, но вы не можете полагаться на классные функции, которые создают приложение-react-app обеспечивает

Вы можете настроить что угодно и все равно сможете легко обновляться.

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

Первое столкновение с CLI происходит при создании нового проекта Vue.

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

Первое, что вы собираетесь сделать с помощью интерфейса командной строки, это создать приложение Vue:

vue create example

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

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

Нажмите пробел , чтобы включить одну из необходимых функций, а затем нажмите ввод , чтобы продолжить. Поскольку я выбрал линтер/форматировщик, Vue CLI запрашивает у меня конфигурацию. Я выбрал ESLint + Красивее, так как это моя любимая настройка:

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

Следующий шаг: тестирование. Я выбрал тестирование, и Vue CLI предлагает мне выбрать одно из двух самых популярных решений: Мокко + Чай против Просто.

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

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

Затем Vue CLI спрашивает меня, предпочитаю ли я использовать пряжу или npm:

и это последнее, о чем он меня спрашивает, а затем он загружает зависимости и создает приложение Vue:

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

Vue CLI создал приложение для нас, и мы можем зайти в папку пример и запустить сервер yarn чтобы запустить наше первое приложение в режиме разработки:

Исходный код начального примера приложения содержит несколько файлов, в том числе package.json :

Здесь определены все команды командной строки, включая сервер yarn , который мы использовали минуту назад. Другими командами являются

  • сборка пряжи , чтобы начать производственную сборку
  • ворс пряжи , чтобы запустить линтер
  • тест пряжи: модуль , для выполнения модульных тестов

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

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

Обратите внимание на мастер слово в левом нижнем углу VS-кода? Это потому, что Vue CLI автоматически создает репозиторий и делает первую фиксацию, поэтому мы можем сразу перейти, изменить что-то, и мы знаем, что мы изменили:

Это довольно круто. Сколько раз вы погружаетесь и меняете вещи, только чтобы понять, когда вы хотите зафиксировать результат, что вы не зафиксировали начальное состояние?

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

Вы можете пропустить интерактивную панель и указать интерфейсу командной строки Vue использовать определенную предустановку:

vue create -p favourite example-2

Где хранятся предустановки

Наборы настроек хранятся в файле .vue js в вашем домашнем каталоге. Вот мой после создания первого “любимого” пресета

{
  "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 использовать определенную версию, передав свойство version:

"@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: быстрое прототипирование

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

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

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

//or

yarn global add @vue/cli-service-global

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

и тогда беги

vue serve app.vue

Вы можете обслуживать более организованные проекты, состоящие также из файлов JavaScript и HTML. Через интерфейс командной строки по умолчанию используется main.js/index.js в качестве точки входа, и вы можете настроить файл package.json и любую конфигурацию инструмента. vue подавать заберет его.

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

Запуск vue build подготовит проект к развертыванию в dist/ и сгенерирует весь соответствующий код, в том числе для зависимостей от поставщика.

Веб-пакет

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

Оригинал: “https://flaviocopes.com/vue-cli/”

Читайте ещё по теме: