От автора: Vue js CLI предоставляет некоторые интересные функции для настройки новых проектов, создания прототипов, добавления плагинов и проверки конфигурации Webpack без извлечения. Вот краткое описание каждой из них.
На данный момент вы, вероятно, слышали о Vue.js, о том, что это относительно новый продукт в сфере инструментов для разработки интерфейсов, где в течение последних нескольких лет почти безраздельно доминировали Angular и React. Многие из вас, читая это, на самом деле, скорее всего, идентифицируют себя как людей, которые выбирают Angular или React, в качестве основного рабочего фреймворка. И хотя я никогда не пытаюсь навязывать кому-то свои предпочтении, я думаю, что вам стоит подумать о добавлении Vue.js в свой инструментарий, даже если это будет только для прототипирования и тестирования.
Vue содержит много крутых вещей. Одной из моих любимых является CLI, который предоставляет некоторые интересные функции для настройки новых проектов, создания прототипов, добавления плагинов и проверки конфигурации Webpack без извлечения. Вот краткое описание каждой из них.
Прежде всего, установите Vue CLI
Прежде чем мы начнем, если вы хотите следовать за мной, вам нужно установить Vue CLI. Это будет самая легкая вещь, которую вы сделаете за весь день, даже проще, чем почистить зубы, вынести мусор или попросить Алекса сыграть трек Kenny G.
Откройте окно терминала и введите следующее:
npm install -g @vue.cli
Или, если вы предпочитаете Yarn в качестве менеджера пакетов:
yarn global add @vue/cli
В этом руководстве я предполагаю, что у вас установлена версия Vue CLI 3 или выше. Если вы не знаете, какая у вас версия, введите следующую команду:
vue --version
Если окажется, что у вас версия ниже 3, запустите одну из приведенных выше команд, чтобы установить последнюю версию.
Теперь вы готовы приступить к работе с Vue.
Настройка проекта
Как и в случае с CLI-интерфейсом Angular и React (create-react-app), CLI Vue упрощает создание новых приложений. Самая крутая особенность подхода Vue заключается в том, что вы можете настроить шаблона проект, который вы задаете, исходя из того, что вы хотите сделать. Попробуем. Введите в терминале следующее:
vue create my-app
Первое, что спросит CLI — хотите ли вы использовать один из пресетов для babel или eslint или вручную выбрать функции. Если вы выберете вариант вручную, вы увидите следующую панель.
Хотите использовать TypeScript с Vue? Круто. Хотите построить PWA, который в наши дни в тренде? Для этого есть шаблон. Хотите маршрутизатор Vue, Vuex для управления состоянием и некоторые тестовые шаблоны? Готово.
Попробуйте выбрать несколько функций, используя пробел, а затем нажмите enter. Vue попросит вас задать несколько других параметров, исходя из того, какие функции вы выбрали. Я выбрал для своего проекта все, поэтому на приведенном ниже изображении показаны все вопросы, которые вы можете получить.
Когда вы ответите на все вопросы, Vue загрузит и установит все, что вам нужно. После этого вы можете войти в каталог и запустить «`npm run serve«`, чтобы увидеть проект или открыть его в своем редакторе. На приведенном ниже изображении показано, как выглядел бы ваш мульти -проект, если вы выберете многие или все доступные функции.
Простое прототипирование
vue create отлично подходит для разработки полного приложения, но иногда вам просто нужно создать прототип, и вы хотите создать что-то быстро, без добавления в процессе кучи шаблона.
Преимущество Vue заключается в том, что вы можете создать HTML-файл, добавить тег скрипта для Vue и начать кодирование, но CLI Vue имеет еще более высокую производительность и включает в себя dev-сервер для запуска прототипов. Начните с установки службы Vue CLI с помощью следующей команды:
npm install -g @vue/cli-service-global
Затем создайте файл с расширением .vue и добавьте в него код Vue. Вы также можете легко сделать это из командной строки:
echo '<template><h1>Hello Vue.js CLI</h1><p>this is cool</p></template>' > App.vue
Затем вы можете запустить vue-сервис и увидеть свой быстрый прототип в действии!
Добавление плагинов на лету
Часто мы не знаем всех функций, которые нам понадобятся для проекта, пока не начнем. Например, вы можете предполагать, что вам понадобится Cypress для сквозной работы в приложении, но вы не уверены, и не хотите добавлять зависимость с самого начала.
К счастью, Vue CLI упрощает добавление этих плагинов в приложение, даже если вы пропустили их во время процесса создания VUE. Для начала вам нужно добавить соответствующий плагин, выполнив следующую команду в корне приложения:
npm install @vue/cli-plugin-e2e-cypress
Когда установка завершена, вы можете использовать команду invoke, чтобы выставить все, что вам нужно и начать тестирование с помощью Cypress:
vue invoke e2e-cypress
Плагин добавит зависимости и новые файлы и папки, необходимые для тестирования. Он также добавит несколько элементов скриптов в файл package.json для сквозного тестирования. Попробуйте запустить npm run e2e!
Просмотр конфигурации Webpack без извлечения
Как и приложение create-react-app, Vue CLI создает абстракцию вокруг Webpack, которая позволяет использовать функции и зависимости, не изменяя вручную конфигурацию Webpack. Тем не менее, нам часто бывает нужно выполнять настройки в процессе, и ни один CLI не может предвидеть каждую функцию, которую вы, возможно, захотите использовать или изменить.
С этой целью Vue CLI позволяет просмотреть конфигурацию Webpack и определить, что генерирует cli, это может быть полезно, если вы вносите изменения и хотите убедиться, что результат — это то, что вы ожидаете. В любом проекте Vue, создаваемом CLI, просто выполните следующую команду:
vue inspect
По умолчанию конфигурация выводится на консоль, но вы можете указать выводить ее в файл, например:
vue inspect > webpack.config.js
Вы можете также просмотреть только часть конфигурации, перейдя по нужному пути:
vue inspect resolveLoader.modules
Обратите внимание, что эта команда предназначена только для просмотра. Любые изменения, внесенные в сгенерированный файл, не влияют на конфигурацию, которую использует Vue при запуске vue serve или vue build.
Vue.js может быть новым игроком на рынке, но нет никаких сомнений в том, что он содержит отличные инструменты. Независимо от вашего рабочего фреймворка или библиотеки, я рекомендую попробовать его и создать что-то новое на Vue уже сегодня.
Автор: Brandon Satrom
Источник: https://www.telerik.com/
Редакция: Команда webformyself.
