что такое vue cli
Что такое CLI? Это утилита командной строки предоставляет доступ к множеству инструментов для сборки проекта.
Установка и системные требования Vue CLI 3
Системные требования
Для работы с Vue CLI v3 потребуется Node.js 8.9+. Но рекомендуется использовать версию платформы v8.11.0+.
Ее можно установить:
Перед началом установки Vue CLI нужно удалить все предыдущие версии CLI. Для этого выполните следующую команду:
Установка CLI Vue 3
Чтобы установить Vue CLI v3, запустите следующую команду:
После установки CLI Vue 3 вы сможете вывести список всех доступных команд, выполнив команду vue:
А также проверить установленную версию, выполнив:
Создание проекта Vue
С помощью Vue CLI вы можете создать новое приложение, выполнив следующую команду:
example-vue-project – это название проекта. Вы можете изменить его.
Затем нужно выбрать вариант установки проекта. Вариант по умолчанию установит два плагина: Babel и ESLint. Также вы можете вручную выбрать расширения, необходимые для вашего проекта из набора плагинов:
Теперь рассмотрим другие варианты обслуживания проекта, доступные в Vue CLI. Для этого перейдите в папку проекта:
Затем выполните следующую команду:
Сервер разработки поддерживает оперативную перезагрузку кода. Поэтому не нужно останавливать и запускать сервер каждый раз, когда вы вносите изменения в код проекта. При этом сохранится даже состояние приложения!
И когда вы закончите разработку своего проекта, то можете использовать следующую команду для создания сборки:
Что такое служба CLI Vue?
Служба Vue CLI – это зависимость (@vue/cli-service), которая предоставляет конфигурации по умолчанию. Служба может быть обновлена, настроена и расширена с помощью плагинов. Она предоставляет несколько скриптов для работы с Vue-проектами. Например, serve, build и inspect.
Мы уже видели сценарии serve и build в действии. Скрипт inspect позволяет проверить конфигурацию веб-пакета в проекте с помощью vue-cli-service. Попробуйте выполнить его:
Анатомия проекта
Проект Vue, созданный с помощью CLI, имеет предопределенную структуру. Если вы решите установить дополнительные плагины (например, маршрутизатор Vue), CLI также создаст файлы, необходимые для использования и настройки этих библиотек.
Файлы и папки в проекте Vue:
Следующий скриншот отображает структуру проекта:
Плагины 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:
Как добавить плагин Vue
Плагины автоматически устанавливаются при создании проекта или инсталлируются разработчиком. Для этого используется команда vue add my-plugin.
Полезные плагины Vue
Я также создал несколько расширений:
А что насчёт webpack?
Большая часть конфигурации проекта Vue CLI абстрагируется в плагины и объединяется с базовой конфигурацией во время выполнения. Но также можно вручную настроить конфигурацию webpack для своего проекта:
Пользовательский интерфейс CLI Vue 3
Создайте новый проект на вкладке «Create». Выберите место для его хранения, затем нажмите кнопку «+ Create a new project here».
После этого вы попадёте в интерфейс, в котором нужно указать информацию о вашем проекте.
Введите данные и нажмите кнопку «Next». Затем вы попадете на вкладку «Presets», где нужно задать варианты настройки проекта:
Продолжим с установкой по умолчанию.
Далее нажмите на кнопку «Create Project». После этого вы попадете в новый интерфейс, который показывает прогресс создания проекта. Затем в панель управления проектом, где можно будет разместить виджеты, которые можно добавить с помощью кнопки «Customize».
Слева от панели настройки расположены ссылки на различные разделы:
Перейдите на страницу «Tasks».
Остановить проект можно с помощью кнопки « Stop task ».
Заключение
В этой статье мы рассмотрели новую версию Vue CLI, которая предоставляет целый ряд удобных функций: интерактивная разработка проектов, обширная коллекция официальных плагинов и полноценный графический интерфейс для создания и управления проектами на основе Vue.js.
Пожалуйста, оставьте ваши мнения по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, подписки, отклики, дизлайки, лайки!
Дайте знать, что вы думаете по данной теме в комментариях. Мы очень благодарим вас за ваши комментарии, дизлайки, подписки, лайки, отклики!
Vue CLI установка и обзор инструмента
Доброго времени суток. В этой статье разберёмся с таким инструментом как Vue cli, рассмотрим как установить Vue cli и какие задачи решает этот инструмент.
Для чего нужен Vue cli?
Vue cli представляет собой инструмент, который позволяет удобно и быстро создать приложение или прототип приложения на Vue.js. Vue cli хорош тем, что для приложения не требуется писать конфигурацию webpack — дефолтная конфигурация уже встроена во Vue cli. Само собой вы можете дописывать и изменять конфиг webpack. Об этом мы еще поговорим в статье. Vue cli состоит из трех компонентов:
Vue cli установка
Установить Vue cli можно следующими командами:
Если команда выполнилась без ошибок, то в терминале должен появиться доступ к команде vue. Проверку можно произвести командой
Команда выведет в консоль версию установленного пакета Vue cli. На момент написания статьи актуальная версию пакета 4.5.13.
Создаем проект с помощью Vue cli
project-name — это папка, в которой и будет создан проект.
Vue cli создание проекта
Вы можете выбрать дефолтные настройки с Vue 2/3 или настроить все индивидуально выбрав Manually select features.
При настройке вручную вам можно будет выбрать следующие опции:
Vue cli установка — выбор опций при ручной настройке проекта
После успешной установки и скачивания пакетов сообщение в консоли предлагает нам перейти в папку проекта следующей командой в терминале:
Теперь мы находимся в корневой директории нашего только что созданного проекта и можем запустить локальный сервер для разработки и кодить:
После выполнения команды у нас поднимется сервер, который будет доступен по адресу http://localhost:8080/. Если перейти по адресу, то вы увидите следующее:
Vue cli установка — тестовый сервер для разработки
Структура проекта
На скриншоте ниже можно ознакомиться со структурой проекта, которую предлагает Vue cli.
Vue cli установка — структура проекта
Рассмотрим поподробнее структуру проекта
Как изменить конфигурацию webpack во vue-cli?
Пример файла vue.config.js
Заключение
Таким образом, мы познакомились с инструментов Vue-cli, который значительно упрощает жизнь разработчиков, научились создавать проекты и менять конфигурацию webpack. Если же вы хотите вручную настроить webpack для проекта vue, то советуем почитать статью — Webpack Vue js — простая сборка приложения
Президент США Джо Байден ужесточает ограничения в отношении Huawei и ZTE
Samsung заявляет, что Android 12 и One UI 4 готовы для Galaxy S21
Опрос в Twitter призывает Элона Маска продать 10% акций Tesla
800 000 человек играют в Forza Horizon 5, а она еще даже не вышла
Исследователи Массачусетского технологического института создали ИИ, который может сделать роботов лучше
Instagram @web.dev.setups
Так называемый принцип Парето был сформулирован в 19 веке. Он говорит, что 20% усилий принесут 80% результата, и наоборот, 80% усилий принесут только 20% результата. Этот закон Парето можно применить в любой сфере жизни. Взглянем на примеры: 20% книг дают 80% знаний, 20% злоумышленников совершают 80% преступлений, 20% всех людей на планете владеют 80% всех денег в мире.
Проанализируйте, какие именно действия принесут вам большую отдачу и отдайте предпочтение именно им. Сконцентрируйтесь на 20% вещах, которые обеспечат вам максимальную отдачу.
⚡Нездоровый перфекционизм это зло
Самокритика хороша только до того момента когда вы перестаете здраво оценивать свои возможности, и стараетесь перейти поставленную планку. В такой момент лучше отставить в сторону черезмерные претензии к самому себе – наша жизнь сама по себе неидеальна. Перестаньте копаться в мелких деталях – этим вы себе только навредите, особенно учитывая тот факт, что копаться в себе можно до бесконечности.
⚡Разрешайте себе отдыхать
⚡Сложно сохранить ровную осанку когда ты сидишь за столом 4, 6 или 8 часов. Спина постоянно ищет удобное положение и интуитивно мы начинаем сползать с кресел вниз. Чтобы этого не произошло нужно использовать подставку для ног.
⚡Подставка для ног позволяет телу испытывать минимальные напряжения и позволяет спине полностью откинуться на стул. Таким образом заняв правильное положение на рабочем месте, можно избавиться от усталости мышц спины и затекания ног.
Руководство для начинающих по Vue CLI
Самая последняя версия Vue CLI — это версия 3. Она предоставляет новый опыт для разработчиков Vue и помогает им начать разработку приложений Vue, не имея дело со сложной конфигурацией инструментов, таких как веб-пакет. В то же время, он может быть настроен и расширен с помощью плагинов для расширенных случаев использования.
Vue CLI v3 — это полноценная система для быстрой разработки и создания прототипов Vue.js. Он состоит из различных компонентов, таких как служба CLI, плагины CLI и недавно веб-интерфейс, который позволяет разработчикам выполнять задачи через простой в использовании интерфейс.
В этой статье я познакомлю вас с последней версией Vue CLI и ее новыми функциями. Я покажу, как установить последнюю версию Vue CLI и как создать, обслуживать и создавать пример проекта.
Vue CLI v3 Установка и требования
В этом разделе мы рассмотрим требования, необходимые для Vue CLI v3, и способы его установки.
Требования
Начнем с требований. Vue CLI v3 требует Node.js 8.9+, но рекомендуется v8.11.0 +.
Вы можете установить последнюю версию Node.js различными способами:
Создатель Vue, Эван Ю, описал версию 3 CLI как «совершенно другого зверя», чем его предшественник. Поэтому важно удалить любую предыдущую версию CLI (то есть 2.xx) перед тем, как приступить к этому учебному пособию.
Если пакет vue-cli установлен глобально в вашей системе, вы можете удалить его, выполнив следующую команду:
Установка Vue CLI v3
Теперь вы можете установить Vue CLI v3, просто выполнив следующую команду на своем терминале:
После успешной установки CLI вы сможете получить доступ к исполняемому файлу vue в своем терминале.
Например, вы можете получить список всех доступных команд, выполнив команду vue :
Вы можете проверить установленную версию, запустив:
Создание проекта Vue
После установки Vue CLI давайте теперь посмотрим, как мы можем использовать его для быстрой сборки завершенных проектов Vue с помощью современного интерфейсного набора инструментов.
Используя Vue CLI, вы можете создать или сгенерировать новое приложение Vue, выполнив следующую команду в своем терминале:
Совет: example-vue-project — это название проекта. Очевидно, вы можете выбрать любое допустимое имя для вашего проекта.
CLI запросит у вас предустановку, которую вы хотите использовать для своего проекта. Одним из вариантов является выбор предустановки по умолчанию, которая устанавливает два плагина: Babel для передачи современного JavaScript и ESLint для обеспечения качества кода. Или вы можете вручную выбрать функции, необходимые для вашего проекта из набора официальных плагинов. Это включает:
Что бы вы ни выбрали, CLI загрузит соответствующие библиотеки и настроит проект для их использования. И если вы решите вручную выбирать функции, в конце подсказок у вас также будет возможность сохранить выбранные параметры в качестве предустановки, чтобы вы могли использовать их в будущих проектах.
Теперь давайте посмотрим на другие сценарии для обслуживания проекта (с использованием сервера разработки веб-пакетов и перезагрузки горячих модулей) и построения проекта для производства.
Перейдите в папку вашего проекта:
Затем выполните следующую команду для локального обслуживания проекта:
Сервер разработки поддерживает такие функции, как горячая перезагрузка кода, что означает, что вам не нужно останавливать и запускать сервер каждый раз, когда вы вносите какие-либо изменения в исходный код вашего проекта. Это даже сохранит состояние вашего приложения!
И когда вы закончите разработку своего проекта, вы можете использовать следующую команду для создания производственного комплекта:
Что такое служба Vue CLI?
Служба Vue CLI — это зависимость во время выполнения ( @vue/cli-service ), которая абстрагирует веб-пакет и предоставляет конфигурации по умолчанию. Его можно обновлять, настраивать и расширять с помощью плагинов.
Что такое Vue CLI
Что такое Vue CLI и зачем это нужно? Давайте рассмотрим базовые теоретические понятия, которые нужно понимать, прежде чем приступать к знакомству с этим инструментом.
Это название состоит из двух слов: vue и cli. Со словом vue все понятно, оно означает, что этот инструмент относится к фреймворку Vue.
command line interface (интерфейс командной строки)
В операционных системах есть специальная программа, которая называется командная строка, запуская которую, вы можете взаимодействовать с операционной системой. Принято программы, которые имеют интерфейс командной строки, могут через нее работать, добавлять к ним слово cli.
Если вы ранее уже работали с фреймворком Vue, то, наверно, представляете насколько много времени может уйти на разворачивание проекта. Нужно установить кучу модулей и дополнительных библиотек с помощью менеджеров пактов npm или yarn. Все эти библиотеки нужно настроить, прописать дополнительные опции, настройки, наладить связь между разными модулями. Чтобы все это настроить, даже если у вас есть какие-то наработки, на это может уйти пару часов. Для опытных программистов это быстрее, но в любом случае на это уходит достаточно много времени.
Vue cli позволяет автоматизировать это автоматическое разворачивание проекта, но не только разворачивание проекта. Есть и другие команды Vue cli, которые позволяют этим проектом быстро управлять и решать какие-то рутинные задачи.
Когда мы разворачиваем проект с помощью Vue cli, у нас разворачивается проект на Vue, где будет связь со сборщиком модулей webpack и связь с пакетом webpack-dev-server. Это специальный пакет, который позволяет разрабатывать наш проект без установки реального production сервера.
Мы можем на лету, в памяти компьютера, развернуть мини-сервер для разработки, где мы сможем быстро тестировать, разворачивать простые проекты на Vue с автоматическим обновлением страницы без перезагрузки страницы.
С помощью vue cli мы можем сделать все это очень быстро, буквально с помощью одной команды.
Ускорение рабочего процесса при работе 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. Он состоит из трех основных инструментов:
В следующих разделах мы будем исследовать первоначальные азы вышеуказанных инструментов и утилит, но для начала давайте посмотрим на практические аспекты, которые делают Vue CLI таким мощным и гибким.
Vue CLI — полнофункциональная система для ускорения нашего процесса разработки приложений на Vue.js
Vue CLI ускоряет и облегчает разработку проекта на Vue.js благодаря внушительному набору функциональных возможностей. Давайте посмотрим, что это за возможности:
Начало работы с Vue CLI
После того, как мы узнали о магии Vue CLI, пришло время, чтобы увидеть её на практике. Для начала нам нужно установить Vue CLI 3. Это потребует Node.js 8.9+ (рекомендуется версия 8.11.0 или новее), поэтому мы должны убедиться, что на наших машинах установлена правильная версия. Затем мы открываем терминал или командную строку и выполняем следующую команду:
Мгновенное создание прототипов
Даже несмотря на то, что Vue CLI предназначен главным образом для работы со сложными проектами, этот инструмент всё равно позволяет нам попробовать наши первые идеи, быстро и без особых усилий. Возможность мгновенного прототипов может быть активирована, если установлен глобальный пакет Vue CLI Service:
Затем в той же директории выполняем:
Создание нового проекта
Предыдущий раздел был только разминкой. Теперь давайте сделаем что-то более сложное.
Команда vue create использует интерактивный процесс для выбора вариантов, чтобы создать новый проект. Давайте выполним её и пройдем через весь процесс создания.
Создание нового проекта с 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 создал для нас.
В директории проекта выше показано, что у нас есть следующие файлы и директории:
Недавно созданная директория src
Давайте теперь взглянем на директорию src:
В директории src, которая показана выше, есть следующие файлы и директории:
Изменение конфигурации проекта
Конфигурация проекта по умолчанию содержит разумные значения параметров, которые, если нужно, доступны для изменения, путем создания файла vue.config.js в директории проекта, или путем добавления секции vue в файле package.json. Давайте попробуем первый вариант: создадим файл vue.config.js и добавим следующий код:
Это позволит компонентам определять свои шаблоны как строки, а не использовать элементы template. Получить сведения о полном наборе параметров конфигурации, доступные для использования, можно на странице Vue CLI Config.
Разработка проекта
Когда мы открываем приложение в браузере, мы увидем следующую страницу:
Это страница Home.vue, которая использует компонент HelloWorld.vue.
Команда serve запускает сервер разработки, работающий от пакета webpack-dev-server, с функцией горячей перезагрузкой модулей (HMR). Это означает, что когда мы внесем изменения в файлы компонентов и сохраним их, изменения немедленно будут показаны, т.е. страница будет обновлена в браузере.
Добавление нового функционала в проект при помощи плагинов Vue CLI
Давайте предположим, что мы хотим использовать компоненты Bootstrap для нашего проекта. К счастью, есть плагин bootstrap-vue, который может предоставить их. Чтобы установить его, выполняем следующую команду:
После установки плагина в директории src, мы найдем новую директорию plugins, в которой будет размещен новый плагин.
Теперь, чтобы проверить работу плагина, изменим файл About.vue:
И когда мы указываем страницу About в браузере, мы увидим, что страница обновилась и стилизована с помощью Bootstrap:
Создание проекта для продакшена
Когда приложение готово к деплою, необходимо создать набор бандлов, содержащие только код приложения и содержимое, а также модули, от которых они зависят, чтобы эти файлы можно было развернуть на рабочем HTTP-сервере.
Сборка приложения
Для сборки приложения выполняем следующую команду:
Изучение директории dist
После завершения процесса сборки, в корневой директории проекта создается директория dist. Давайте посмотрим на её содержимое:
Так что теперь мы готовы для деплоя приложения на продакшен-сервере. Есть много вариантов на выбор. Вы можете узнать о многих из них, посетив страницу Deployment.
Давайте сделаем GUI-версию нашего проекта при помощи Vue UI
Vue CLI 3 — очень мощный, но имеет свою цену. Есть слишком много вариантов, команд и параметры для настройки, чтобы запомнить все их. Это делает его более сложным и трудным для работы. Чтобы прийти в состояние «просто и легко» Гийом Чау (Guillaume Chau) создал Vue UI, который значительно упрощает процесс разработки и делает его более доступным. Сначала он может показаться немного странным, чтобы объединить CLI-инструмент с графическим интерфейсом, но как вы увидите позже, этот необычный симбиоз является довольно мощный и эффективный.
Воссоздание нашего проекта с помощью Vue UI
В этом разделе мы рассмотрим создание одного и то же проекта, который мы создали раньше, но на этот раз мы будем использовать 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.
В модальном окне мы выбираем параметры, с которым мы хотим выполнить задачу.
Когда мы перейдем на вкладку Output, мы получим логи задачи.
Когда мы перейдем на вкладку Analyzer, мы получаем красивый график, который обощает информацию для всего проекта.
Задача build почти похожа на задачу serve за исключением того, что первая создает бандл для продакшена, который может использоваться для деплоя приложения.
Поле Output задачи inspect даёт нам информацию о полученной конфигурации webpack.
И это всё. Мы успешно воссоздали наш проект с помощью Vue UI. Но, как мы видели, процессы создания и настройки проще и гораздо боле приятные, когда мы используем GUI.