Vue cli что это такое
Руководство для начинающих по 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 ), которая абстрагирует веб-пакет и предоставляет конфигурации по умолчанию. Его можно обновлять, настраивать и расширять с помощью плагинов.
Веб-приложение на Node и Vue, часть 2: компоненты, формы, маршруты
Перед вами — вторая часть серии материалов, которая посвящена созданию веб-приложения Budget Manager с использованием Node.js, Vue.js и MongoDB. В первой части мы занимались сервером, а именно — подготовили основные методы RESTful API и наладили JWT-аутентификацию. Сегодня приступим к работе над клиентской частью приложения, создадим каркас фронтенда, средства для регистрации в системе и входа в неё, поговорим о маршрутах и об их защите.
Установка Vue.js и использование vue-cli
Вот как выглядит проект после создания папки application :
Теперь перейдём в только что созданную папку с помощью интерпретатора командной строки, и, если vue-cli ещё не установлен, выполним следующую команду:
Эта команда позволяет установить vue-cli глобально, поэтому неважно, в какой именно папке мы будем находиться, выполнив её.
Теперь вызовем следующую команду:
После выполнения вышеприведённой команды и загрузки шаблона вам будет задан ряд вопросов:
Если хотите, на данном этапе может поменять название проекта, описание, сведения об авторе. Для того, чтобы не отклоняться от этого материала, оставьте всё остальное таким, как показано на рисунке.
Теперь можно полюбоваться на стандартную страницу Vue.
Очистка приложения Vue
Теперь надо очистить маршруты. Для этого откроем файл index.js в папке router и приведём его к такому виду:
Обратите внимание на то, что существует множество способов структурирования маршрутов, но, для того, чтобы не усложнять проект, мы просто импортируем компоненты и зададим маршруты в этом файле.
Установка зависимостей
Прежде чем заняться разработкой фронтенда приложения, нужно установить ещё несколько зависимостей. Перед выполнением следующей команды проверьте, находитесь ли вы в папке application :
Теперь установим зависимости разработки:
Мы будем использовать axios для обработки HTTP-запросов. В vuetify нас интересуют визуальные компоненты и возможность пользоваться компоновкой элементов на основе сетки. Библиотеку vue-cookie будем применять для работы с куки-файлами. Пакеты sass-loader и node-sass позволят нам пользоваться SCSS.
Начало работы над фронтендом приложения
В файле Authentication.vue разместим следующий код:
Расширением этого компонента займёмся позже, а пока перейдём в папку router и поработаем с маршрутами.
Для начала импортируем компонент Authentication и настроим маршрут для его использования:
После этого, если перейти по адресу http://localhost:8080/#/login, можно увидеть пустую страницу с надписью «Auth!». Это говорит о том, что маршрут аутентификации работает.
Теперь откроем файл main.js из папки src и импортируем vuetify и vue-cookie :
В файле _variables.scss зададим такие параметры:
В файл _animations.css добавим описания анимаций bounceIn и slideInFromLeft :
Импортируем частичные шаблоны в styles.scss :
Настроим внешний вид приложения, приведя к следующему виду блок стилизации в файле App.vue :
Тут мы импортируем ранее подготовленные стили scss и задаём использование фиксированного фонового изображения для приложения. Мы стремимся к тому, чтобы на любом устройстве экран приложения выглядел примерно одинаково.
Обратите внимание на то, что всё, что касается стилизации и работы с фоном, на функционал приложения не влияет, поэтому вы вполне можете пропустить эти шаги или украсить приложение так, как вам захочется.
Масштабирование области просмотра и загрузка иконок
Разработка компонента Authentication
Импортируем в него то, что нам понадобится и объявим константу, в которую запишем путь к API:
Теперь напишем методы:
В первом методе используются три аргумента:
В противном случае мы устанавливаем поле snackbar объекта context в true и записываем в message сообщение об ошибке.
И, наконец, тут присутствуют описания кнопок, которые мы используем для создания новой учётной записи или для отправки формы с целью входа в систему.
Взглянем теперь на переменные, хранящие данные компонента:
И, наконец, вот код стилизации компонента, который надо разместить в том же файле Authentication.vue (тут вы можете дать волю фантазии и сделать всё таким, как вам хочется):
Вот как выглядят компоненты для входа в систему и регистрации нового пользователя.
Разработка компонента Home
Перейдём в папку pages и создадим файл компонента Home.vue :
На данный момент в шаблоне этого компонента, код которого представлен ниже, будут лишь несколько текстовых сообщений:
Этот компонент является основой для домашней страницы, которой мы займёмся в следующей части этой серии. А пока выполним GET-запрос к API для получения всех зарегистрированных пользователей, используя отладочный метод API и передавая токен в заголовке запроса. Вот как это будет выглядеть:
Защита системы навигации
Рассмотрим этот код.
Этой командой экспортируем маршрутизатор.
Без этого, если пользователь перезагрузит страницу или закроет её, а потом снова откроет, он будет перенаправлен на страницу входа в систему.
# Создание проекта
# vue create
Для создания нового проекта запустите команду:
Вам будет предложено выбрать пресет настроек. Можно выбрать пресет по умолчанию (default), который добавляет Babel + ESLint, или настройку вручную («Manually select features») для выбора требуемых возможностей в новом проекте.
Настройки по умолчанию отлично подходят для быстрого прототипирования нового проекта, в то время как настройка вручную предоставляет больше опций, которые могут потребоваться.
При выборе настройки вручную, в самом конце будет также предложено сохранить ваш выбор в качестве нового пресета настроек, чтобы воспользоваться им в будущем. Подробнее пресеты настроек и плагины мы обсудим в следующем разделе.
В процессе создания проекта, также может быть предложено выбрать предпочитаемый менеджер пакетов или использовать Taobao зеркало для npm регистра
, чтобы ускорить установку зависимостей. Этот выбор также будет сохранён в
Команда vue create предоставляет множество опций — вы можете изучить их все выполнив:
# Использование GUI
Вы можете создавать и управлять проектами через графический интерфейс командой vue ui :
Команда выше откроет окно браузера с графическим интерфейсом, в котором можно пройти те же шаги создания проекта.
# Шаблоны для версии 2.x (старое поведение)
# Конфигурация
# Глобальная конфигурация CLI
Также можно воспользоваться командой vue config для изучения или изменения глобальной конфигурации CLI.
# Целевые браузеры
# vue.config.js
Файл должен экспортировать объект с настройками:
# baseUrl
# publicPath
Ограничения относительного publicPath
Относительный publicPath имеет некоторые ограничения и его следует избегать если:
Вы используете маршрутизацию HTML5 history.pushState ;
Вы используете опцию pages для создания многостраничного приложения (MPA).
Опция может быть полезна и на этапе разработки. Если вы хотите запускать сервер разработки из корня сайта, то можно устанавливать значение по условию:
# outputDir
# assetsDir
Каталог (относительно outputDir ) для хранения сгенерированных статических ресурсов (js, css, img, fonts).
assetsDir игнорируется при перезаписи опций имени файла (filename) или имени фрагментов (chunkFilename) сгенерированных ресурсов.
# indexPath
По умолчанию: ‘index.html’
Путь к сгенерированному index.html (относительно outputDir ). Также можно указать абсолютный путь.
# filenameHashing
# pages
По умолчанию: undefined
Сборка приложения в многостраничном режиме (MPA). У каждой «страницы» должна быть соответствующая точка входа (entry) в виде JavaScript-файла. Значением может быть объект, где ключ — имя точки входа, а значение:
# lintOnSave
Тип: boolean | ‘warning’ | ‘default’ | ‘error’
По умолчанию: ‘default’
Выполнять ли линтинг кода при сохранении во время разработки с помощью eslint-loader
. Эта опция действует только когда установлен плагин @vue/cli-plugin-eslint
Установка значения в ‘error’ заставит eslint-loader считать все предупреждения ошибками, а значит и они будут отображены в браузере.
Кроме того, можно настроить отображение в браузере предупреждений и ошибок:
# runtimeCompiler
По умолчанию: false
Использование сборки Vue которая содержит компилятор шаблонов. Установка значения в true позволит вам использовать опцию template в компонентах Vue, но дополнительно добавит 10 КБайт кода в ваше приложение.
# transpileDependencies
См. README плагина для получения дополнительной информации.
# productionSourceMap
Установка в false может ускорить сборку для production, если не требуются source maps.
# crossorigin
По умолчанию: undefined
Как новый Vue CLI упрощает разработку
Дата публикации: 2018-05-30
От автора: разработчики, переходящие с React на Vue, не имеют лучшего опыта работы с инструментами или довольно перегружены процессом подготовки. React имеет приложение create-response-app, которое может настроить полномасштабный проект, одновременно скрывая внутреннюю логику инструментов (webpack, Babel и т. д.). У Vue также есть инструмент командной строки (CLI), но он не настолько интуитивно понятен, как ожидается разработчиками.
Команда Vue запускает новую версию инструмента CLI (3.0). Новая версия теперь предлагает те же функции, что и приложение create-react-app, и многое другое. В настоящее время инструмент находится в стадии бета-тестирования, но мы уже можем использовать его. Я покажу вам некоторые функции этого инструмента, а также то, как новый Vue CLI изменит ваш опыт разработки.
Старый в сравнении с новым
Было бы неплохо начать с того, чтобы обновить вашу память и дать вам некоторую контекстуальную информацию. Я сделаю это, сравнивая основные функции старого и нового инструмента CLI.
Установка
Чтобы установить старый инструмент CLI, мы обычно делали это:
Фреймворк VUE JS: быстрый старт
Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля