Создатель Vue Эван Ю В недавнем выступлении на конференции не упоминалось о новых функциях Vue, вместо этого он почти полностью сосредоточился на Vue CLI 3 .
Инструмент CLI — это простая утилита, которая напрямую не добавляет какие-либо функции в ваши приложения Vue, так почему суета?
Удивительный рост популярности Vue за последний год подчеркнул, что разработчики действительно заботятся о платформе: производительность, гибкость и простота использования.
Как вы увидите, Vue CLI 3 — это большой шаг вперед в гибкости и простоте использования. Он предоставляет вашему проекту Vue мгновенный доступ к лучшим инструментам сборки из переднего мира, сочетая их с разумными настройками по умолчанию. В то же время он позволяет легко настраивать и настраивать в соответствии с вашими потребностями.
Для достижения этого в Vue CLI 3 была принята новая архитектура на основе плагинов, которая отличается от архитектуры на основе шаблонов версий 1 и 2. В рамках этой новой архитектуры конфигурация проекта разделена на независимые плагины, то есть один для TypeScript, один для ESLint. , и т.д.
Вот некоторые вещи, которые вам понравятся в Vue CLI 3:
- Никакой блокировки, так как плагины могут быть добавлены в любой момент жизненного цикла разработки.
- Плагины с нулевой конфигурацией позволяют вам тратить время на разработку, а не на настройку.
- Легко обновить, так как конфигурация может быть настроена без «извлечения».
- Позволяет разработчикам создавать свои собственные плагины и пресеты.
И последнее, но не менее важное: Vue CLI 3 очень быстро переносит вас с пустого холста на работающий сервер, позволяя создавать прототипы проекта, содержащего всего один файл .vue .
Вам также может понравиться:
Переименование src Папка проекта Vue CLI 3 .
Плагин Архитектура
Базовая конфигурация для проекта Vue CLI 3 — это простой веб — пакет и 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.
При первой проверке конфигурации шаблона Vue CLI 2 Webpack
Вы можете почувствовать облегчение при установке вашего первого проекта Vue CLI 3 и увидеть, что в корневом каталоге проекта нет файла webpack.config.js . Это связано с тем, что большая часть конфигурации проекта для Vue CLI 3 абстрагируется в плагины и объединяется с базовой конфигурацией во время выполнения.
Настроить конфигурацию Webpack можно с помощью нового файла vue.config.js . Например, если вы хотите добавить плагин Webpack (не путать с плагином Vue CLI), добавьте необходимый код в свойство configureWebpack .
vue.config.js
JavaScript
1
module.exports = {
2
configureWebpack: {
3
// Merged into the final Webpack config
4
plugins: [
5
new MyAwesomeWebpackPlugin()
6
]
7
}
8
}
Если вам нужно быть более изощренным, есть несколько других API, предоставляемых Vue CLI 3 для конфигурации Webpack, что позволяет вам напрямую изменять его или использовать мощную цепочку webpack . Вы можете прочитать больше о конфигурации Webpack в Vue CLI 3 здесь .
Примечание. Конфигурация Webpack разделена между плагинами и, возможно, vue.config.js . Чтобы увидеть конфигурацию во время выполнения, используйте команду
vue inspect.
Пользовательские плагины
Плагины могут предоставлять свои собственные параметры конфигурации, которые указываются через pluginOptionsсвойство vue.config.js . Например, если вы используете VUE-CLI-плагин критичного для извлечения критической CSS, вы можете указать страницу widthи heightкак это:
JavaScript
xxxxxxxxxx
1
module.exports = {
2
pluginOptions: {
3
critical: {
4
width: 375,
5
height: 565
6
}
7
}
8
}
Если вы хотите внести более существенные изменения в конфигурацию вашего проекта, или если вы хотите повторить одни и те же изменения для нескольких проектов, вы можете абстрагироваться в свой собственный плагин. Затем вы можете опубликовать это на NPM, если хотите поделиться с другими разработчиками.
Этот вид расширяемости стал возможен благодаря архитектуре на основе шаблонов Vue CLI 2, поскольку вы можете просто разветвить один из шаблонов и добавить свои изменения. Однако у этой системы было два серьезных узких места:
- Любые последующие обновления или исправления ошибок должны были бы быть вручную объединены в разветвленный шаблон, что делает его трудоемким в обслуживании.
- Вы ограничены одним шаблоном на проект. Что если есть функции из нескольких шаблонов, которые вы хотите включить в проект? В конечном итоге вам придется создавать свои собственные шаблоны с каждой перестановкой и комбинацией нужных вам функций, что усугубит предыдущую проблему.
Именно по этим причинам сторонние шаблоны Vue CLI 2 действительно никогда не снимались. Vue CLI 3 однозначно преодолел эти ограничения, поэтому я предсказываю, что в дополнение к официальным появится множество крутых сторонних плагинов.
Нет «Извлечение»
«Извлечение» — это терминология, созданная в приложении Create React, и относится к процессу, в котором все зависимости конфигурации и сборки перемещаются из папки скриптов (например, плагинов) и помещаются непосредственно в ваш проект.
Это сделано для прямого редактирования конфигурации. Однако это довольно негибкая система, поскольку она необратима и не позволяет вам получать обновления сценариев, даже если вам нужно всего лишь отредактировать только один.
Извлечение из приложения Создать React
И в этом заключается главное достижение Vue CLI 3: гибкость подключаемых модулей и конфигурационных API означает, что нет необходимости извлекать проект Vue CLI 3. Таким образом, проекты Vue CLI 3 будут обновляться в течение всего жизненного цикла.
Быстрое прототипирование
Если вы похожи на меня, иногда вы поражаетесь такой классной идее, что вам нужно отбросить все остальное и сразу приступить к созданию прототипа. Но если вам придется потратить полчаса на настройку Webpack и Babel, прежде чем вы сможете получить что-либо на экране, это действительно убивает настроение.
Vue CLI 3 позволяет невероятно быстро переходить с нуля на обслуживаемое приложение. Он включает в себя сервер Webpack dev с горячей перезагрузкой модуля и все остальные навороты, которые вы ожидаете.
Еще лучше, если Vue CLI 3 установлен глобально, вы можете обслуживать файлы .js или .vue без локальных зависимостей. Это позволяет вам сделать что-то вроде следующего:
JavaScript
xxxxxxxxxx
1
echo '<template><h1>Hello!</h1></template>' > App.vue
2
vue serve
И вы сразу увидите проект Vue на экране.
Используя vue serve впервые
Заключение
Здесь я рассмотрел лишь некоторые из новых функций в Vue CLI 3. Есть много других вкусных удовольствий, таких как:
- Используйте переменные среды в вашем проекте через файл .env .
- Создайте проект как веб-компонент для использования в любом другом проекте JavaScript с помощью команды
vue-cli-service build --target wc --name my-element [entry] - Режим DLL, который строит ваши зависимости NPM в отдельный пакет поставщиков, что сокращает время сборки будущих сборок.
И более. На момент написания этой статьи Vue CLI 3 все еще находится в бета-версии, но почему бы не начать сейчас, установив его или читая документы .
Спасибо Эвану и команде за еще один фантастический инструмент.
