4 удивительные вещи, которые вы можете сделать с помощью Vue.js CLI

4 удивительные вещи, которые вы можете сделать с помощью Vue.js CLI

От автора: 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 в качестве менеджера пакетов:

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее
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 JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Преимущество 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.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree