От автора: создатель 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 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 можно установить с помощью интерактивных подсказок в процессе инициализации проекта:
Можно установить дополнительные плагины в проект в любое время жизненного цикла с помощью 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
1 2 3 4 5 6 7 8 |
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.»
Пользовательские плагины
Плагины могут предоставлять свои варианты настроек, которые задаются через свойство pluginOptions в файле vue.config.js. Например, если вы используете vue-cli-plugin-critical для извлечения критического CSS, вы можете задать width и height страницы следующим образом:
1 2 3 4 5 6 7 8 |
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 без локальных зависимостей. Это позволяет делать примерно следующее:
1 2 |
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
Источник: //vuejsdevelopers.com/
Редакция: Команда webformyself.