Тяжелый! Vue CLI 3.0 официально выпущен с несколькими крупными обновлениями

внешний интерфейс Командная строка Vue.js Webpack
Сборник｜Тан Юнь Недавно Юкси Ю, автор Vue, объявил об официальном выпуске Vue CLI 3.0 на Medium, который также принесет многим разработчикам долгожданные новые функции. Богатые встроенные функции

You Yuxi сказал, что Vue CLI 3.0 полностью отличается от других версий, и он подвергся рефакторингу:

  1. Современный интерфейсный инструмент для минимизации проблем с настройкой, особенно когда инструменты разработчика будут более смешанными;

  2. Включайте лучшие практики в цепочку инструментов, когда это возможно, и делайте их стандартными для приложений Vue.

Основная цель Vue CLI — предоставить параметры сборки для предварительных конфигураций, созданных на основе webpack 4. Цель — свести к минимуму количество конфигураций разработчика, поэтому Vue CLI 3 поддерживает готовые проекты со следующими характеристиками:

  • Предварительно настроенные функции веб-пакета, такие как горячая замена модулей, разделение кода, встряхивание дерева, эффективное постоянное кэширование и т. д.;

  • Внедрение полифилла на основе транспиляции и использования ES2017 через Babel 7 + preset-env (плагин Babel)

  • Поддержка PostCSS (автопрефикс включен по умолчанию) и всех основных препроцессоров CSS.

  • Современный режим: параллельная публикация нативного пакета ES2017 + и традиционного пакета (подробности ниже).

  • Многостраничный режим: создавайте приложения с несколькими точками входа HTML/JS.

  • Цель сборки: сборка однофайловых компонентов Vue в библиотеки или нативные веб-компоненты (подробности ниже).

Кроме того, вы можете смешивать и сочетать несколько интеграций при создании новых проектов:

  • TypeScript

  • PWA

  • Vue Router & Vuex

  • ESLint / TSLint / Prettier

  • Модульное тестирование с Jest или Mocha

  • Тестирование E2E с помощью Cypress или Nightwatch

Кроме того, Vue CLI гарантирует, что все вышеперечисленные функции хорошо работают вместе.

Настраивается без извлечения

Все функции, перечисленные выше, поддерживают нулевую настройку: при создании проекта с помощью Vue CLI 3 устанавливается служба среды выполнения Vue CLI (@vue/cli-service), выбираются подключаемые модули функций и создаются необходимые файлы конфигурации. Тем не менее, вам просто нужно сосредоточиться на своем коде.

Хотя инструменты CLI удаляют потенциальные зависимости, они часто теряют возможность тонкой настройки этих зависимостей, поэтому пользователям часто приходится «извлекать» для внесения изменений. Недостатком этого является то, что, как только он появится, вы не сможете обновить его до последней версии в долгосрочной перспективе.

You Yuxi считает, что доступ к конфигам в низкоуровневой форме очень важен, но он не хочет отказываться от этих «изгнанных» пользователей, поэтому находит метод конфигурации, который не требует извлечения.

Для сторонних интеграций, таких как Babel, TypeScript и PostCSS, Vue CLI будет учитывать файлы конфигурации этих инструментов. Пользователи Webpack могут использовать webpack-merge для объединения простых объектов в окончательную конфигурацию или для точного определения и настройки существующих загрузчиков и плагинов через webpack-chain.

Кроме того, Vue CLI поставляется с командой vue inspect, которая поможет вам проверить внутреннюю конфигурацию веб-пакета. Самым большим преимуществом является то, что с небольшими настройками и без извлечения вы все равно можете обновлять службы и плагины CLI для исправлений или обновлений.

Расширяемая система плагинов

Система плагинов Vue CLI 3 очень мощная: она может внедрять зависимости и файлы на этапе формирования шаблона приложения и настраивать конфигурацию веб-пакета приложения или вводить дополнительные команды в службу CLI во время разработки. Большинство встроенных интеграций, таких как TypeScript, используют API-интерфейс плагина (https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/PluginAPI.js) для реализации функциональности плагина.

Кроме того, в Vue CLI 3 больше нет «шаблона», вместо этого теперь вы можете выполнить удаленную настройку, чтобы поделиться своими плагинами и параметрами с другими разработчиками.

Графический интерфейс пользователя (GUI)

Благодаря отличной работе Гийома ЧАУ (основная команда Vue.js) Vue CLI 3 также поставляется с полным графическим интерфейсом, позволяющим не только создавать новые проекты, но и управлять плагинами и задачами в проектах, такими как:

Электрон не нужен, просто используйтеvue uiНачни это.

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

Instant Prototyping

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

Больше возможностей Современный режим

С Babel вы можете использовать все новейшие языковые функции ES2015+, но это также означает, что нам нужны транспилируемые и полифилловые пакеты для поддержки старых браузеров. Эти преобразованные пакеты часто более многословны и медленнее анализируются и запускаются, чем исходный собственный код ES2015+. Учитывая, что большинство современных браузеров сегодня поддерживают нативный код ES2015+, он должен поддерживать и более старый код, но запускать такой неэффективный код для браузера — пустая трата времени.

Использование «Современного режима» может помочь вам решить эту проблему. При сборке используйте следующую команду:

vue-cli-service build --modernскопировать код

Vue CLI сгенерирует две версии приложения: современный пакет для современных браузеров, поддерживающих модули ES, и устаревший пакет для старых браузеров, не поддерживающих модули ES.

Сгенерированный HTML-файл автоматически использует метод, описанный в сообщении Филиппа Уолтона (https://philipwalton.com/articles/deploying-es2015-code-in-production-today/):

  • Для загрузки старых пакетов вы можете использовать

  • Исправление для

Для приложения Hello World современный пакет был уменьшен на 16%. На практике современные программные пакеты часто значительно ускоряют синтаксический анализ и оценку, что, в свою очередь, повышает скорость загрузки приложений.

Ю Юйси также сказал:

Причина, по которой мы не сделали современный режим по умолчанию, заключается в том, что при использовании CORS/CSP требуется более длительное время сборки и дополнительная настройка.

Создание веб-компонентов

Теперь вы можете встроить любой компонент *.vue в веб-компонент в своем проекте Vue CLI 3:

vue-cli-service build --target wc --name my-element src/MyComponent.vueскопировать код

Это создаст пакет JavaScript, который обертывает внутренний компонент Vue и регистрирует его как собственный пользовательский элемент на странице, который затем можно увидеть как .

Вы даже можете поместить несколько компонентов *.vue в пакет с многоблочным разделением кода:

vue-cli-service build --target wc-async 'src/components/*.vue'скопировать код

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

С помощью Vue CLI 3 ту же кодовую базу можно также использовать для создания приложений, библиотек UMD или собственных веб-компонентов.

Наконец, Юси Ю сказал, что Vue CLI 3 теперь доступен в качестве стандартного инструмента сборки для приложений Vue, но это только начало. Как упоминалось выше, долгосрочная цель Vue CLI состоит в том, чтобы включить текущие и будущие лучшие практики в цепочку инструментов, в конечном итоге предоставляя пользователям высокопроизводительные приложения.

Ссылки по теме

Документация: https://cli.vuejs.org/guide/installation.html

Исходная ссылка: https://medium.com/the-vue-point/vue-cli-3-0-is-here-c42bebe28fbb


Категории