vue cli plugin import components

VUE-CLI-PLUGIN-IMPORT-Компоненты

Автоматически импортируйте компоненты в вашем приложении Vue CLI с сотрясением деревьев, поддерживая Vue 2 и 3.

Почему и как?

Посмотрите мою статью о том, почему эта функция существует, как она работает и проблемы.

Нужно что -то более мощное? Рассмотрите возможность использования неплагин-Vue-компонентов

Функции

• ? Vue 2 и 3 поддержка с полным трясом дерева
• ⚡ Lazy Загрузите свои компоненты
• Горячая модуль перезагрузка готова
• ? Написано в TypeScript

Настраивать

Установите, используя Vue CLI. (Vue Cli 4+ рекомендуется)

vue add import-components

---

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

Добавьте компоненты в свои components/ папку.

 | components/
--- | ComponentFoo.vue
--- | ComponentBar.vue

Используйте их в любом .vue как обычно. Получите доступ к своим компонентам с помощью Pascalcase или Kebab-Case.

 < template >
< div >
  < ComponentFoo />
  < component-bar />
</ div >
</ template >

Удалите imports и components из раздела script .

Асинхронная компонента загрузка

Вы можете загрузить свои компоненты Async, префиксируя имя своего компонента с Lazy или lazy- , в зависимости от вашего синтаксиса.

 < template >
< div >
  <!-- ComponentFoo will be loaded in async -->
  < LazyComponentFoo />
  <!-- ComponentBar will be loaded sync -->
  < ComponentBar />
</ div >
</ template > 

Конфигурация

Вы можете изменить поведение плагина, изменяя параметры в ./vue.config.js .

 // vue.config.js
module . exports = {
  pluginOptions : {
    components : {
      ...
    }
  }
}

Параметры

Все варианты необязательны.

Путь - строка

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

По умолчанию: ./src/components

шаблон - строка

Regex, чтобы найти файлы в path . Примечание. Если вы опустите шаблон, он будет использовать настроенные extensions

По умолчанию: **/*.{${extensions.join(',')},}

Игнорировать - строка []

Regex, чтобы игнорировать файлы в path .

По умолчанию: [ '**/*.stories.js' ],

MapComponent - (компонент: компонент) => компонент | ЛОЖЬ

Функция, которую вы можете использовать для фильтрации путей, которые вы не хотите отсканировать.

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

 // vue.config.js
module . exports = {
  pluginOptions : {
    components : {
      // prefix all automatically imported components with an auto prefix
      mapComponent ( component ) {
        component . pascalCase = 'Auto' + upperFirst ( component . pascalCase )
        component . kebabName = 'auto-' + component . pascalCase
        return component
      }
    }
  }
} 

Extensions - String []

При сканировании пути для компонентов, которые должны рассматриваться как компоненты.

По умолчанию: ['.js', '.vue', '.ts']

Ограничения

Только статический импорт

Будут работать только компоненты, которые статически определены в вашем шаблоне.

< template >
  < component :is = " dynamicComponent " />
</ template >

Использование папок в пространстве имен

Предполагается, что вы используете конвенции VUE для названия ваших компонентов. Ниже приведено не работать без ручного картирования компонентов.

 | components/
--- | Foo.vue
------ | Namespace/Foo.vue

Это создаст конфликт с двумя компонентами под названием Foo.vue . Вы должны назвать свои файлы компонентов с помощью пространства имен. т.е. NamespaceFoo.vue .

Компоненты JavaScript

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

Рекомендуется придерживаться компонентов .vue SFC.

Лицензия

Грань