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

1656603743 uznajte kak ispolzovat vuejs cli

Интересно изучать Vue.js? Получите мою электронную книгу на vuehandbook.com

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

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

Установка

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

npm install -g @vue/cli

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

yarn global add @vue/cli

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

Ezi3VXVa2p5CpgoyCZCa75QNoW-MTTI7m5G6

Что дает Vue CLI?

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

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

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

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

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

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

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

Первое, что вы собираетесь сделать с CLI, это создать программу Vue:

vue create example

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

mJgJ2biDiceJFpTng3CCs0KLestOD0OkIdK3

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

VHH9GRYaGmHXrK-R14mSeabWaTfziYHV3u1T

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

xlJKu3wPlvEbvaUMYYNw324pye5TTNlBot9S

Следующим шагом является выбор способа нанесения ворса. Я выбрал «Линт при сохранении».

4piDaNMeerzha0yl8EHNTl5fTEV8M8OXLaeZ

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

HdNBSsWDIFdwx74QuBsMdT3tDN3LdGXXBJqG

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

5Ksk5IoNHC5ojo5PgGw5llQIjuCr784BJQBD

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

Ltghrk2SQRhcEbstlnXkMh1R-mgzrsAnHSki

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

6sqjc-L31QY39KzP6ap1iCWGTTkRX1YeqMd6

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

zr1V90so3ThCT2YS3MillgY7d2aXxkXzTuNe

Как запустить только что созданную программу Vue CLI

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

my8YXCSW3AQxC80gMSi2TW6HSI7Pee6zf0gF

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

vYdRUaFtp8mqXnNdmxTDFi5SijA769JwVvjo

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

  • yarn buildчтобы начать производственную сборку
  • yarn lintчтобы запустить линтер
  • yarn test:unitчтобы запустить модульные тесты

Я опишу образец программы, созданной Vue CLI, в отдельном руководстве.

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

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

CZ1J7IPrBER2TZ3BzOe33lANVrbu43xDy1mB

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

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

Вы можете пропустить интерактивную панель и поручить 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 использовать определенную версию, передав свойство version:

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

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

Удаленно хранить пресеты

Настройки можно хранить в GitHub (или в других сервисах), создав репозиторий, содержащий файл «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 
//or yarn 
global add @vue/cli-service-global

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

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

а затем бежать

vue serve app.vue
LVFDuVO3plJc0u2w0GQ0F0PCMDrhvVZumQ9K

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

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

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

Webpack

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

0LXsf4FKpRzswYbuxqSdCtKhPzOeKXgW-XnQ

Интересно изучать Vue.js? Получите мою электронную книгу на vuehandbook.com

yptuVaTEKOeOJ7ChmJnzYc1lKq9LjqeewymF

Добавить комментарий

Ваш адрес email не будет опубликован.