Un plugin-vue-components — это инструмент, который автоматически импортирует и регистрирует любые используемые вами компоненты Vue. Он использует API-интерфейс Rollup в качестве уровня абстракции поверх различных API-интерфейсов инструментов сборки/сборки. Это означает, что один плагин может работать с такими упаковщиками, как Rollup, webpack и Vite.

Если у вас много страниц, использующих схожие компоненты, импорт и регистрация всех их может привести к избыточности и пустой трате времени. К счастью, для этого есть решение. unplugin-vue-components — это инструмент, который автоматически импортирует и регистрирует любые используемые вами компоненты Vue.

Если вы не знакомы с unplugin, он использует API-интерфейс Rollup в качестве уровня абстракции поверх различных API-интерфейсов сборщиков/инструментов сборки, преобразуя перехватчики и вызовы сборки в стиле Rollup для совместимости с целевым сборщиком. Это означает, что один подключаемый модуль (или не подключаемый модуль) может работать с такими сборщиками, как Rollup, webpack и Vite, вместо того, чтобы переносить его на новый инструмент сборки. unplugin-vue-components использует unplugin, чтобы его можно было использовать практически где угодно, а это означает, что вы можете вставить его в проект без необходимости многого переписывать. Теперь, когда вы знаете немного больше об отключении плагинов, давайте попробуем.

Перейти вперед:

Чем unplugin-vue-components отличается от глобальной регистрации?

В отличие от глобальной регистрации, unplugin-vue-components более интеллектуальна в управлении компонентами, поскольку она способна статически анализировать ваш код.

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

unplugin-vue-components анализирует ваш код, чтобы увидеть, где используются компоненты, что делает встряхивание дерева и разделение кода более эффективными. Кроме того, unplugin-vue-components не требует от вас ручной регистрации каждого компонента, а вместо этого просто заставляет вас указывать папку компонентов (или нет, если вы используете src/components).

unplugin-vue-components также имеет более мощную конфигурацию, как вы увидите позже. Вы можете делать такие вещи, как интегрировать типы TypeScript, создавать пользовательские функции для перенаправления компонентов в определенные библиотеки и создавать глобальную функцию преобразования.

настройка unplugin-vue-components

Создание проекта

Настройка unplugin-vue-components проста. Во-первых, вам нужно будет создать новый проект Vue. Я рекомендую использовать Vite, но из-за особенностей отключения плагина вы можете использовать все, что захотите.

Для Vite вы должны запустить npm create vite и пройти через мастер установки, обязательно выбрав Vue в качестве фреймворка. Вместо этого в более сложных проектах следует использовать create-vue, так как он предлагает больше возможностей для настройки. Мастер установки даст вам инструкции для завершения установки:

Добавление компонентов unplugin-vue

После того, как вы закончите сборку проекта, вам нужно установить unplugin-vue-components с помощью npm (или другого менеджера пакетов по вашему выбору).

npm i -D unplugin-vue-components

Теперь вам нужно сообщить своему упаковщику, чтобы он использовал его. Для этого добавьте unplugin-vue-components в файл конфигурации вашего сборщика. Например, с Vite вы должны перейти к vite.config.js и добавить следующее:

import Components from 'unplugin-vue-components/vite' // This imports the plugin
export default defineConfig({
  // The rest of the config here should be left untouched
  plugins: [
    Components({ /* plugin config here */}) // This registers the plugin in Vite
  ]
})

Если вы используете веб-пакет, ваш webpack.config.js должен выглядеть примерно так:

module.exports = {
  // The rest of the config here should be left untouched
  plugins: [
    require('unplugin-vue-components/webpack')({ /* plugin config here */ }) // This imports and registers the plugin in Webpack
  ]
}

Если вы не храните свои компоненты в src/components, вам нужно будет настроить новый путь для использования. Вы можете сделать это, передав массив путей, которые вы хотите для unplugin-vue-components, в свойство dirs конфигурации unplugin-vue-components:

import Components from 'unplugin-vue-components/vite'
export default defineConfig(
  plugins: [
    Components({dirs: ["src/example/dir/here","other/example"]})
  ]
})

Тестирование

Теперь автоматический импорт и регистрация должны работать! Проверьте это, используя компонент, не импортируя и не регистрируя его.

Если вы используете шаблон Vite Vue, вы можете проверить это, удалив импорт HelloWorld в верхней части App.vue. Теперь запустите npm run dev и проверьте, работает ли он:

Переход на unplugin-vue-components

Если у вас есть существующий проект и вы хотите использовать unplugin-vue-components, не волнуйтесь. Переносить проекты на него несложно. Во-первых, вам нужно будет выполнить шаги установки, описанные выше. Обязательно обновите файл конфигурации вашего сборщика, чтобы правильно добавить плагин (это может различаться между сборщиками).

После этого, как описано выше, вы должны добавить свои каталоги компонентов через свойство dirs. Если все ваши компоненты находятся в src/components, вы можете пропустить это:

{
  dirs: ["src/example/dir/here","other/example"]
} // this should be passed as an argument in the plugin function, like shown above for Vite.

После этого удалите операторы импорта и регистрации. К счастью, вы можете делать это постепенно, так как unplugin-vue-components не конфликтует с существующими операторами.

Получение максимальной отдачи от unplugin-vue-components

Теперь, когда мы настроили unplugin-vue-components, давайте посмотрим, как использовать все его функции.

Более 200 000 разработчиков используют LogRocket для создания лучшего цифрового опыта

Подробнее →

Использование с другими библиотеками пользовательского интерфейса

По умолчанию нет возможности автоматически импортировать и регистрировать компоненты из других модулей. Однако с небольшой настройкой вы можете заставить их работать с помощью распознавателей. Резолверы — это функции, которые позволяют направлять компоненты по имени в определенный пакет. Например, если вы используете компонент Dropdown в Ant Design, вы можете перенаправить каждое использование <Dropdown> на Dropdown AntD.

Для многих популярных библиотек пользовательского интерфейса unplugin-vue-components включает встроенный преобразователь, который можно использовать, импортировав его и передав в свойство конфигурации resolvers:

import Components from 'unplugin-vue-components/vite'
import {
  AntDesignVueResolver,
} from 'unplugin-vue-components/resolvers' // import the resolver
Components({
  resolvers: [
    AntDesignVueResolver(), // pass the resolver in the config; you can configure the resolver by passing options in an object parameter
  ],
})

Однако во многих пакетах нет встроенных преобразователей. К счастью, создать собственный преобразователь несложно. Резолверы — это функции, которые принимают строку, указывающую имя компонента, и возвращают фактическое имя компонента и имя пакета.

В качестве примера, давайте создадим резолвер, который перенаправляет все использование любых компонентов, начинающихся с Example, и перенаправляет их на example-package с удаленным префиксом Example:

Components({
  resolvers: [
    (componentName) => {
      if (componentName.startsWith("Example")) {
        return { name: componentName.slice(6), from: "example-package" };
      }
    },
  ],
});

Мы также можем делать гораздо больше сложных вещей с помощью функции разрешения. Например, если мы хотим сопоставить только определенные компоненты из example-package, мы можем добавить массив для сопоставления компонентов из:

const ExampleElements = ["Dropdown", "Button", "Card"]; // this should be outside of the config
// ... config ...
Components({
  resolvers: [
    (componentName) => {
      if (
        componentName.startsWith("Example") &&
        ExampleElements.includes(componentName.splice(6)) // check if the name minus example is in the above array
      ) {
        return { name: componentName.slice(6), from: "example-package" };
      }
    },
  ],
});

Если в библиотеке компонентов есть несколько вариантов для каждого компонента, вы также можете перебрать массив и проверить, есть ли компонент, используя вместо этого string.startsWith(); возможности безграничны.

Использование с TypeScript

Во-первых, чтобы получить правильную поддержку TypeScript, используйте Volar. Volar — это языковой сервер для Vue, который позволяет вам использовать более продвинутые функции разработки Vue, такие как проверка типов, подсветка синтаксиса и автозаполнение в вашей среде IDE/текстовом редакторе. Хотя Vue еще не поддерживает такое использование TypeScript, Volar уже добавил поддержку проверки типов и автозаполнения в этом случае.

Теперь вам нужно обновить файл конфигурации, включив в него свойство dts со значением true:

{
  dts: true // put this in the unplugin-vue-components config
}

Это также должно быть автоматически включено, если установлен TypeScript. Еще одна вещь, которую вам нужно сделать, это добавить components.d.ts в свой список tsconfig.js includes. components.d.ts — это файл, содержащий все типы, и если вы не укажете TypeScript включить его, он ничего не сделает.

Это все, что вам нужно сделать в большинстве случаев. Однако, если вы используете библиотеки, которые уже регистрируют компоненты глобально и не предоставляют типы, unplugin-vue-components может помочь и в этом. Вы можете использовать его поддержку типов для компонентов, которые не импортируются unplugin-vue-components; вам просто нужно добавить их в файл конфигурации.

Например, если вы хотите, чтобы unplugin-vue-components содержали типы для ExampleComponentOne и ExampleComponentTwo из пакета example-package, вы должны изменить конфигурацию примерно так:

{
  dts: true,
  types: [{
    from: 'example-package',
    names: ['ExampleComponentOne', 'ExampleComponentTwo'],
  }],
}

Теперь вы получаете такую ​​же поддержку типов, как и с любыми другими компонентами, используя unplugin-vue-components.

Автоматический импорт JavaScript и других файлов, отличных от Vue.

unplugin-vue-components по умолчанию не поддерживает импорт других файлов. Тем не менее, вы можете использовать другой инструмент удаления плагинов, unplugin-auto-import. unplugin-auto-import позволяет вам использовать функции JavaScript без необходимости их импорта, и хотя его сложнее настроить, чем unplugin-vue-components, его все же легко использовать.

Во-первых, вам нужно будет установить unplugin-auto-import, поскольку вы установили unplugin-vue-components (включая добавление его в конфигурацию сборщика). Затем вам нужно будет добавить выражения Regex, чтобы указать, какие файлы вы хотите включить в свойство include. Оттуда вы можете добавить пресеты и пользовательские конфигурации пакетов в свойство imports:

AutoImport({
  // targets to transform
  include: [
    /\.[tj]sx?$/, // match .ts, .tsx, .js, .jsx
  ],
  // imports to include
  imports: [
    "example-preset", // for certain packages, unplugin-auto-import includes a preset, which you can use like this
    {
      "example-package": [
        "namedImport", // this is how you declare named imports to use
        ["alisedImport", "exampleAlias"], // you can also alias named imports. This will use function aliasedImport from example-package and alias it to exampleAlias
        ["default", "exampleDefault"], // you can use default as the name to get the default export.
      ],
    },
  ],
  // local directories to use auto-import with.
  dirs: ["./src/assets/scripts"],
});

Для получения дополнительной информации о том, как это использовать, ознакомьтесь с документацией unplugin-auto-import.

Заключение

Вот и все! Теперь вы можете уменьшить объем кода, автоматически импортируя компоненты Vue! Для получения дополнительной информации об unplugin-vue-components посетите его репозиторий GitHub. Я надеюсь, что вы узнали что-то из этого, и спасибо за чтение!

Испытайте свои приложения Vue точно так же, как пользователь

Отладка приложений Vue.js может быть сложной, особенно если во время сеанса пользователя происходят десятки, если не сотни изменений. Если вы заинтересованы в мониторинге и отслеживании мутаций Vue для всех ваших пользователей в рабочей среде, попробуйте LogRocket.

https://logrocket.com/signup/

LogRocket похож на DVR для веб-приложений и мобильных приложений, записывая буквально все, что происходит в ваших приложениях Vue, включая сетевые запросы, ошибки JavaScript, проблемы с производительностью и многое другое. Вместо того, чтобы гадать, почему возникают проблемы, вы можете агрегировать и сообщать о том, в каком состоянии было ваше приложение, когда возникла проблема.

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