Vue cli что это

Что такое CLI Vue — гид по для новичка

Для нового приложения Vue лучше использовать Vue CLI .

Что такое CLI? Это утилита командной строки предоставляет доступ к множеству инструментов для сборки проекта.

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

Обновлено: 2023-06-11 20:47:30 Сергей Бензенко автор материала

Установка и системные требования Vue CLI 3

Системные требования

Для работы с Vue CLI v3 потребуется Node.js 8.9+. Но рекомендуется использовать версию платформы v8.11.0+.

Ее можно установить:

• Загрузив двоичные файлы для вашей операционной системы с официального сайта проекта.
• Используя официальный менеджер пакетов.
• С помощью менеджера версий.

Перед началом установки Vue CLI нужно удалить все предыдущие версии CLI. Для этого выполните следующую команду:

npm uninstall vue-cli -g

Установка CLI Vue 3

Чтобы установить Vue CLI v3, запустите следующую команду:

npm install -g @vue/cli

Примечание: чтобы использовать командную строку от имени администратора в Windows для глобальной установки пакетов, нужно изменить разрешения. На сайте npm есть руководство о том, как это сделать .

После установки CLI Vue 3 вы сможете вывести список всех доступных команд, выполнив команду vue:

А также проверить установленную версию, выполнив:

vue --version $ 3.2.1

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

С помощью Vue CLI вы можете создать новое приложение, выполнив следующую команду:

vue create example-vue-project

example-vue-project – это название проекта. Вы можете изменить его.

Затем нужно выбрать вариант установки проекта. Вариант по умолчанию установит два плагина: Babel и ESLint. Также вы можете вручную выбрать расширения, необходимые для вашего проекта из набора плагинов:

• Babel.
• TypeScript.
• Progressive Web App support.
• Vue Router.
• Vuex (библиотека для управления состоянием Vue);
• Препроцессоры CSS (PostCSS, CSS modules, Sass, Less , Stylus ).
• Модуль юнит-тестов Mocha или Jest.
• Модуль E2E-тестов Cypress или Nightwatch.

Теперь рассмотрим другие варианты обслуживания проекта, доступные в Vue CLI. Для этого перейдите в папку проекта:

cd example-vue-project

Затем выполните следующую команду:

npm run serve

Она запустит локальный сервер разработки по адресу http://localhost:8080 . Если вы перейдёте по этому адресу в своём браузере, то увидите следующую страницу:

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

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

npm run build

Эта команда сохранит собранный код в папку dist проекта. Об этой процедуре вы можете прочитать здесь.

Что такое служба CLI Vue?

Служба Vue CLI – это зависимость (@vue/cli-service), которая предоставляет конфигурации по умолчанию. Служба может быть обновлена, настроена и расширена с помощью плагинов. Она предоставляет несколько скриптов для работы с Vue-проектами. Например, serve, build и inspect.

Мы уже видели сценарии serve и build в действии. Скрипт inspect позволяет проверить конфигурацию веб-пакета в проекте с помощью vue-cli-service. Попробуйте выполнить его:

vue inspect

Анатомия проекта

Проект Vue, созданный с помощью CLI, имеет предопределенную структуру. Если вы решите установить дополнительные плагины (например, маршрутизатор Vue), CLI также создаст файлы, необходимые для использования и настройки этих библиотек.

Файлы и папки в проекте Vue:

• public – папка содержит общедоступные файлы, такие как html и favicon.ico. Размещенные здесь статические ресурсы будут скопированы и не упакованы в веб-пакет.
• src – папка содержит исходные файлы проекта.
• src/assets – папка содержит ресурсы проекта, такие как png.
• src/components – папка содержит компоненты Vue.
• src/App.vue – основной компонент Vue-проекта.
• src/main.js – основной файл проекта, который загружает Vue-приложение.
• config.js – файл конфигурации для Babel.
• json – файл содержит список зависимостей проекта, а также параметры конфигурации для ESLint, PostCSS и поддерживаемых браузеров.
• node_modules– папка содержит установленные пакеты npm.

Следующий скриншот отображает структуру проекта:

Плагины CLI Vue

Плагины CLI – это пакеты npm, которые реализуют дополнительные функции для Vue-проекта. Бинарный файл vue-cli-service автоматически распознает и загружает плагины, перечисленные в файле package.json.

Базовая конфигурация для проекта Vue CLI 3 – это webpack и Babel. Все остальные расширения могут быть добавлены через плагины.

Есть официальные плагины, созданные командой разработчиков Vue. А также плагины, написанные сторонними программистами. Имена официальных плагинов начинаются с @vue/cli-plugin-, а названия плагинов, разработанных сообществом, начинаются с vue-cli-plugin-.

Официальные плагины Vue CLI 3:

• Typescript;
• PWA;
• Vuex;
• Vue Router;
• ESLint;
• Unit testing etc.

Как добавить плагин Vue

Плагины автоматически устанавливаются при создании проекта или инсталлируются разработчиком. Для этого используется команда vue add my-plugin.

Полезные плагины Vue

Существует много плагинов Vue CLI, которые могут оказаться полезными для ваших проектов. Например, библиотека Vuetify UI и Storybook. Вы также можете использовать плагин Electron Builder для быстрого создания Vue-проекта на основе Electron.

Я также создал несколько расширений:

• vue-cli-plugin-nuxt: плагин Vue CLI для быстрого создания универсального приложения Vue с Nuxt.js.
• vue-cli-plugin-bootstrap: плагин Vue CLI для добавления Bootstrap 4 в проект.

А что насчёт webpack?

Большая часть конфигурации проекта Vue CLI абстрагируется в плагины и объединяется с базовой конфигурацией во время выполнения. Но также можно вручную настроить конфигурацию webpack для своего проекта:

• Создать файл config.js в корневом каталоге проекта, а затем выполнить настройку в параметре configureWebpack:

module.exports = < configureWebpack: < // custom config here >>

• Изменить конфигурацию webpack

Пользовательский интерфейс CLI Vue 3

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

vue ui

После этого интерфейс будет доступен по адресу http://localhost:8000 .

Создайте новый проект на вкладке «Create». Выберите место для его хранения, затем нажмите кнопку «+ Create a new project here».

После этого вы попадёте в интерфейс, в котором нужно указать информацию о вашем проекте.

Введите данные и нажмите кнопку «Next». Затем вы попадете на вкладку «Presets», где нужно задать варианты настройки проекта:

• Default preset — для установки по умолчанию с плагинами Babel и ESLint.
• Manual — для самостоятельного выбора плагинов.
• Remote preset — для удаленной установки из репозитория Git.

Продолжим с установкой по умолчанию.

Далее нажмите на кнопку «Create Project». После этого вы попадете в новый интерфейс, который показывает прогресс создания проекта. Затем в панель управления проектом, где можно будет разместить виджеты, которые можно добавить с помощью кнопки «Customize».

Слева от панели настройки расположены ссылки на различные разделы:

• Plugins — для добавления новых плагинов Vue CLI.
• Dependencies — для управления пакетами.
• Configuration — для настройки инструментов.
• Tasks — для запуска скриптов.

Перейдите на страницу «Tasks».

Нажмите кнопку serve , а затем кнопку « Run task », чтобы запустить проект.

Остановить проект можно с помощью кнопки « Stop task ».

Заключение

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

Введение #

Vue CLI — полноценная система для быстрой разработки на Vue.js, предоставляющая:

• Интерактивное создание проекта через @vue/cli .
• Быстрое прототипирование через @vue/cli + @vue/cli-service-global без конфигурации.
• Runtime-зависимость ( @vue/cli-service ) предоставляющая:
  • Возможность обновления;
  • Создана поверх webpack, с оптимальными настройками по умолчанию;
  • Настройка с помощью конфигурационного файла в проекте;
  • Расширяемость плагинами

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

  Компоненты системы #

  Vue CLI состоит из нескольких составных частей — если вы посмотрите на исходный код, то обнаружите, что это монорепозиторий, в котором несколько отдельно опубликованных пакетов.

  CLI #

  CLI ( @vue/cli ) — это npm-пакет, устанавливаемый глобально и предоставляющий команду vue в терминале. Он позволяет быстро создать новый проект командой vue create , или мгновенно прототипировать ваши новые идеи через vue serve . Также можно управлять проектами в графическом интерфейсе через vue ui . Мы рассмотрим, что он может делать, в следующих разделах руководства.

  Сервис CLI #

  Сервис CLI ( @vue/cli-service ) — это зависимость для разработки. Это npm-пакет, устанавливаемый локально в каждый проект, создаваемый с помощью @vue/cli .

  Сервис CLI построен на основе webpack и webpack-dev-server. Он содержит:

  • Ядро сервиса, которое загружает другие плагины для CLI;
  • Внутреннюю конфигурацию webpack, оптимизированную для большинства приложений;
  • Бинарный файл vue-cli-service внутри проекта, который позволяет использовать команды serve , build и inspect .

  Если вы знакомы с create-react-app, то @vue/cli-service похож на react-scripts , хотя набор возможностей и отличается.

  В разделе Сервис CLI всё это разбирается подробнее.

  Плагины для CLI #

  Плагины для CLI — это npm-пакеты, которые предоставляют дополнительные возможности для ваших проектов, создаваемых через Vue CLI, такие как транспиляция Babel / TypeScript, интеграция ESLint, модульное тестирование, и E2E-тестирование. Легко определять плагины для Vue CLI, поскольку их имена начинаются с @vue/cli-plugin- (для встроенных плагинов) или vue-cli-plugin- (для плагинов сообщества).

  Когда вы запускаете бинарный файл vue-cli-service внутри проекта, он автоматически определяет и загружает все плагины CLI, указанные в файле package.json проекта.

  Плагины могут добавляться как часть проекта на этапе его создания или их можно добавить в проект позднее. Они могут быть также сгруппированы в переиспользуемые пресеты настроек. Мы обсудим их подробнее в разделе плагины и пресеты.

  Vue cli что это

  Vue-cli представляет инструмент для быстрого создания проектов под Vue.js. Такие проекты уже имеют некоторую готовую начальную структуру, установленную конфигурацию, в частности, конфигурацию для Webpack, а также ряд базовых файлов. Текущая верся cli 3.0.

  Для использования vue-cli вначале его надо установить. Для в консоли или терминале нужно выполнить команду:

  npm install -g @vue/cli

  Если ранее был установлен vue-cli других версий, например, 2.х или 1.х, то их предварительно надо удалить с помощью команды npm uninstall vue-cli -g

  Проверить текущую версию vue cli можно с помощью команды

  vue --version

  После установки vue-cli создадим на жестком диске какую-нибудь папку, где будут находиться проекта Vue.js и с помощью команды cd перейдем к этой папке.

  cd C:\vuejs

  Затем выполним в консоли следующую команду:

  vue create cliapp

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

  После ввода команды консоль отобразит две опции для выбора:

  

  Здесь предоставляется на выбор две опции:

  • default(babel, eslint) : проект с настройками по умолчанию, который включает функциональность Babel и Eslint.
  • Manually select features : это опция позволяет вручную выбрать компоненты, которые будут добавлены в проект.

  С помощью клавиш вверх-вниз можно перемещаться между опциями. К примеру выберем опцию Manually select features . После этого нам надо будет отметить те компоненты, которые мы хотим включить в проект:

  

  Опять же с помощью клавиш вверх-вниз можно перещаться между компонентами. Если надо выбрать все или, наоборот, снять выделение со всех, то можно использовать клавишу A.

  К примеру, НЕ выберем ни одного компонента, чтобы создаваемый проект был предельно минималистичен, и нажмем на Enter.

  Далее будет предложено указать, как будет храниться конфигурация:

  

  Здесь доступны две опции:

  • In dedicated config files : хранение конфигурации в отдельных файлах.
  • In package json : хранение всей конфигурации в package.json.

  Выберем опцию In package json .

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

  Созданный проект буде иметь следующую структуру:

  

  Стоит отметить, что по умолчанию создается скрытый епозиторий git для проекта. Если он нам не нужен, то при создании проекта надо использовать флаг -n (сокращение от —no-git):

  vue create -n cliapp

  Если мы обратимся к файлу package.json, то увидим, что он уже содержит определение команд для запуска и построения приложения:

  < "name": "cliapp", "version": "0.1.0", "private": true, "scripts": < "serve": "vue-cli-service serve", "build": "vue-cli-service build" >, «dependencies»: < "vue": "^2.5.17" >, «devDependencies»: < "@vue/cli-service": "^3.0.4", "vue-template-compiler": "^2.5.17" >, «postcss»: < "plugins": < "autoprefixer": <>> >, «browserslist»: [ «> 1%», «last 2 versions», «not ie

  Так, в секции scripts определена команда «serve», которая, используя инфраструктуру CLI, запускает проект. Перейдем к этой папке и выполним эту команду в консоли:

  

  Консоль отобразит адрес, по которому можн обратиться к запущенному проекту. Например, в моем случае это http://localhost:8081/.

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

  vue ui

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

  Плагины и пресеты настроек #

  Vue CLI использует архитектуру на основе плагинов. Если изучить package.json в только что созданном проекте, можно обнаружить зависимости, которые начинаются с @vue/cli-plugin- . Плагины могут модифицировать внутреннюю конфигурацию webpack и внедрять команды в vue-cli-service . Большинство возможностей, перечисленных в процессе создания проекта, реализованы в виде плагинов.

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

  Устанавливать и управлять плагинами можно в GUI с помощью команды vue ui .

  Установка плагинов в существующий проект #

  Каждый плагин для CLI поставляется с генератором (который создаёт файлы) и плагином для runtime (который меняет конфигурацию webpack и внедряет команды). Когда вы используете vue create для создания нового проекта, некоторые плагины будут уже предустановлены, в зависимости от вашего выбора необходимых возможностей. В случае, когда необходимо установить плагин в уже существующий проект, вы должны сделать это командой vue add :

  vue add eslint 

  Команда vue add специально разработана для установки и запуска плагинов Vue CLI. Это не означает, что она заменяет обычные npm-пакеты. Для установки обычных npm-пакетов по-прежнему используйте менеджер пакетов, который выбрали.

  Рекомендуется закоммитить все текущие изменения в вашем проекте перед запуском vue add , поскольку команда запустит генератор файлов плагина и, возможно, внесёт изменения в уже существующие файлы.

  Команда @vue/eslint трансформируется в полное название пакета @vue/cli-plugin-eslint , устанавливает его из npm, и запускает его генератор.

  # это аналогично предыдущей команде vue add cli-plugin-eslint 

  Без префикса @vue команда будет трансформировать название к публичному пакету. Например, чтобы установить сторонний плагин vue-cli-plugin-apollo :

  # устанавливает и запускает vue-cli-plugin-apollo vue add apollo 

  Вы можете также использовать сторонние плагины со специфичным scope. Например, если плагин назван @foo/vue-cli-plugin-bar , то его можно добавить командой:

  vue add @foo/bar 

  Можно передавать опции генерации в установленный плагин (для пропуска интерактивного выбора):

  vue add eslint --config airbnb --lintOn save 

  Если плагин уже установлен, вы можете пропустить установку и только вызвать его генератор с помощью команды vue invoke . Команда принимает такие же аргументы, как и vue add .

  Если, по какой-либо причине, ваши плагины перечисляются в файле package.json , отличном от расположенного в проекте, то укажите путь к каталогу с другим файлом package.json в опции vuePlugins.resolveFrom в файле package.json проекта.

  Например, если у вас есть файл .config/package.json :

   "vuePlugins":  "resolveFrom": ".config" > > 

  Локальный плагин проекта #

  Если требуется доступ к API плагина в вашем проекте и вы не хотите создавать полноценный плагин для этого, можно использовать опцию vuePlugins.service в файле package.json :

   "vuePlugins":  "service": ["my-commands.js"] > > 

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

  Вы можете добавить файлы, которые будут вести себя как плагины UI опцией vuePlugins.ui :

   "vuePlugins":  "ui": ["my-ui.js"] > > 

  Для получения дополнительной информации ознакомьтесь с API плагина для UI.

  Пресеты настроек #

  Пресет настроек для Vue CLI — JSON-объект, который содержит предустановленные опции и плагины для создания нового проекта, чтобы пользователю не приходилось проходить через цепочку вопросов для их выбора.

  Пресеты, сохраняемые во время vue create , создаются в конфигурационном файле в домашнем каталоге пользователя ( ~/.vuerc ). Вы можете напрямую изменять этот файл для внесения правок / добавления / удаления сохранённых пресетов.

  Вот пример пресета настроек:

   "useConfigFiles": true, "cssPreprocessor": "sass", "plugins":  "@vue/cli-plugin-babel": >, "@vue/cli-plugin-eslint":  "config": "airbnb", "lintOn": ["save", "commit"] >, "@vue/cli-plugin-router": >, "@vue/cli-plugin-vuex": > > > 

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

   "useConfigFiles": true, "plugins": . >, "configs":  "vue": . >, "postcss": . >, "eslintConfig": . >, "jest": . > > > 

  Эти дополнительные конфигурации будут объединены в package.json или соответствующие файлы конфигураций, основываясь на значении useConfigFiles . Например, при указании «useConfigFiles»: true , значение configs.vue будет объединено в файл vue.config.js .

  Версии плагинов в пресете #

  Вы можете явно указать версии используемых плагинов:

   "plugins":  "@vue/cli-plugin-eslint":  "version": "^3.0.0", // . другие настройки для этого плагина > > > 

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

  Предоставление интерактивного выбора пользователю #

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

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

  Для таких случаев можно указать «prompts»: true в настройках плагина, чтобы позволить пользователю сделать свой выбор:

   "plugins":  "@vue/cli-plugin-eslint":  // разрешаем пользователю выбрать свою конфигурацию ESLint "prompts": true > > > 

  Пресет из удалённого репозитория #

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

  • preset.json : основной файл, содержащий настройки пресета (обязателен).
  • generator.js : генератор, который внедряет или модифицирует файлы в проекте.
  • prompts.js : файл подсказок, который может собирать настройки для генератора.

  После публикации репозитория, при создании проекта теперь можно указать опцию —preset для использования пресета из удалённого репозитория:

  # использование пресета из репозитория GitHub vue create --preset username/repo my-project 

  GitLab и BitBucket также поддерживаются. Убедитесь, что используете опцию —clone при загрузке из стороннего репозитория:

  vue create --preset gitlab:username/repo --clone my-project vue create --preset bitbucket:username/repo --clone my-project # репозитории на собственном хостинге vue create --preset gitlab:my-gitlab-server.com:group/projectname --clone my-project vue create --preset direct:ssh://git@my-gitlab-server.com/group/projectname.git --clone my-project 

  Пресет из локального файла #

  При разработке удалённого пресета настроек может часто требоваться отправлять пресет в удалённый репозиторий для его проверки. Для упрощения разработки можно использовать локальные пресеты напрямую. Vue CLI будет загружать локальные пресеты, если путь в значении —preset будет относительным или абсолютным, или заканчиваться на .json :

  # ./my-preset должен быть каталогом, содержащим preset.json vue create --preset ./my-preset my-project # или напрямую использовать json-файл в cwd: vue create --preset my-preset.json my-project 

  Похожие публикации:

  1. Ui дизайнер что это за профессия
  2. Как называется главная страница сайта в html
  3. Как собрать кластер из компьютеров
  4. Как создать базу данных в postgresql