Vue CLI 3: поворотный момент для front-end разработки

Vue CLI 3: поворотный момент для front-end разработки

От автора: создатель Vue Evan You на последней конференции мало говорил о новых функциях Vue. Вместо этого почти все выступление было посвящено Vue CLI 3. CLI – это простая утилита, которая напрямую не добавляют функции в Vue приложение. Тогда откуда столько шума?

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

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

Для достижения сказанного выше Vue CLI 3 принял новую архитектуру плагинов и ушел от шаблонной архитектуры версий 1 и 2. В новой архитектуре настройка проекта разделяются по категориям в независимые плагины. Т.е. один для TypeScript, один для ESLint и т.д.

Что вы полюбите в Vue CLI 3:

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

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

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

Нет блокировки, плагины можно добавлять в любой момент жизненного цикла разработки

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

Легкость улучшения, так как настройку можно кастомизировать без «выбросов»

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

Последнее, но не менее важное – Vue CLI 3 очень быстро проведет вас от пустого холста до запущенного сервера и позволяет прототипировать проект в одном файле .vue.

Архитектура плагинов

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

Изменение настроек Webpack (например, вставка нового загрузчика)

Изменение package.json (например, вставка скрипта)

Изменение других файлов в дереве проекта (например, вставка разметки в index.html)

Среди официальных Vue CLI 3 плагинов — Typescript, PWA, Vuex, Vue Router, ESLint, юнит тестирование и т.д. Эти плагины, естественно, предоставляют по умолчанию настройки лучших практик.

Установка плагинов

Плагин в проекте Vue CLI 3 можно установить с помощью интерактивных подсказок в процессе инициализации проекта:

Vue CLI 3: поворотный момент для front-end разработки

Можно установить дополнительные плагины в проект в любое время жизненного цикла с помощью CLI команды vue add my-plugin. То есть вы не ограничены выборами, сделанными в начале разработки.

Если у вас есть предпочтительный набор плагинов, которые вы хотите использовать во всех проектах, например, Vuex, TypeScript и ESLint с конфигом Airbnb, Vue CLI 3 позволяет сохранить эти настройки в локальный файл ~/.vuerc. Теперь вы можете мгновенно раскрутить идеально настроенный проект!

Webpack

Слон в посудной лавке любого инструмента – это обработка Webpack.

Когда первый раз разбираешься с конфигом шаблонов Webpack в Vue CLI 2

Вы вздохнете с облегчением, когда установите первый проект Vue CLI 3 и не увидите там webpack.config.js в корне. Почти все настройки проекта для Vue CLI 3 абстрагированы в плагины и объединены в базовые настройки в runtime.

Изменить настройки Webpack можно через файл vue.config.js. Например, если нужно добавить плагин Webpack (не путать с плагином Vue CLI), вставьте необходимый код в свойство configureWebpack.

vue.config.js

module.exports = {
  configureWebpack: {
 // Merged into the final Webpack config
 plugins: [
 new MyAwesomeWebpackPlugin()
 ]
  }
}

Если нужен более красивый способ, в сети есть несколько других API от Vue CLI 3, предоставляющих настройку Webpack, которые позволяют напрямую проводить мутации или использовать webpack-chain. Более подробно о конфиге Webpack в Vue CLI 3 здесь.

«Заметка: Webpack конфиг разбит среди плагинов и, возможно, vue.config.js. Для просмотра конфига runtime используйте команду vue inspect.»

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

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

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

Пользовательские плагины

Плагины могут предоставлять свои варианты настроек, которые задаются через свойство pluginOptions в файле vue.config.js. Например, если вы используете vue-cli-plugin-critical для извлечения критического CSS, вы можете задать width и height страницы следующим образом:

module.exports = {
  pluginOptions: {
 critical: {
 width: 375,
 height: 565 
 }
  }
}

Если хотите внести более существенные изменения в настройки проекта или хотите повторить изменения в других проектах, можно абстрагироваться в свой плагин. Затем его можно опубликовать на NPM, если хотите поделиться им с другими резработчиками.

Такая расширяемость была возможна в шаблонной архитектуре Vue CLI 2. Вы могли просто разбить один шаблон и добавить свои изменения. Однако у такой системы было 2 серьезных узких места:

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

Вы ограничены одним шаблоном на проект. А если вы хотите включить в проект функции из нескольких шаблонов? Нужно было создавать свой шаблон со всеми перестановками и комбинациями функций, что усугубляло предыдущую проблему.

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

Нет «выбросов»

Выброс – это термин из Create React App, который можно описать как процесс, когда все настройки и билд зависимости перемещаются из папки со скриптами (читайте плагины) напрямую в проект.

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

Выброс из Create React App

Главное достижение Vue CLI 3: гибкость плагинов и настройка API означают, что вам не нужно проводить выброс проекта Vue CLI 3. Так Vue CLI 3 проекты будут обновляться на протяжении всего жизненного цикла.

Быстрое прототипирование

Если вы похожи на меня, иногда вас посещает такая классная идея, что вам нужно бросить все и начать прототипировать. Но если вы должны, то вам нужно потратить полчаса на возню с Webpack и Babel конфиг, чтобы хоть что-то появилось на экране. Это убивает настроение.

Vue CLI 3 невероятно быстро проходит процесс от нуля до запущенного приложения. Он включает в себя Webpack dev сервер с горячей перезагрузкой модулей и всеми фишками, которые вы ждете.

Еще лучше, если Vue CLI 3 установлен глобально, вы можете обслуживать файлы .js или .vue без локальных зависимостей. Это позволяет делать примерно следующее:

echo '<template><h1>Hello!</h1></template>' > App.vue
vue serve

И проект Vue мгновенно появляется на экране.

Когда первый раз используешь vue serve

Заключение

Я рассказал всего лишь о некоторых новых функциях в Vue CLI 3. Их гораздо больше:

Используйте переменные среды в проекте через файл .env

Создавайте проект как веб-компонент, чтобы использовать его в любом другом JS проекте через команду vue-cli-service build —target wc —name my-element [entry]

DLL режим – строит NPM зависимости в отдельный вендорный пакет, улучшая время создания билда

И многое другое. Vue CLI 3 до сих пор находится в бете на момент написания статьи. Но почему бы не начать уже сейчас, установив и прочитав документацию.

Спасибо Evan и команде за еще один прекрасный инструмент.

Автор: Anthony Gore

Источник: https://vuejsdevelopers.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