Обычно при создании приложения на Vue у нас есть базовые компоненты, которые используются во многих местах приложения. Чаще всего это кнопки, различные элементы форм и т.д. Импортировать их каждый раз довольно утомительно. Лучше зарегистрировать их глобально, и сделать это так, чтобы потом мы просто делали базовый компонент, а дальше всё происходило само собой без нашего участия.
И сделать это совсем несложно. Информация ниже актуальна для приложения, созданного с помощью VUE-CLI, у которого под капотом используется webpack. Для начала нам нужно принять соглашение, что все базовые компоненты будут у нас начинаться с какого-то префикса. Допустим, _base-. Так у нас будут _base-button.vue, _base-input.vue и т.д. И мы будем глобально их регистрировать как BaseButton, BaseInput. Для автоматизации этого процесса создадим в папке, в которой хранятся компоненты (обычно это папка components) файл _globals.js. Для начала нам нужно найти все файлы, начинающиеся с _base-. И сделаем мы это с помощью доступной в webpack функции require.context():
const requiredComponents = require.context( // Смотрим только в текущей папке '.', // Не смотрим в дочерних папках false, // Выбираем только файлы с префиксом _base- /_base-[\w-]+\.vue$/)Дальше для каждого найденного файла нам нужно конвертировать название в PascalCalse:
requiredComponents.keys().forEach(name => { const componentConfig = requiredComponents(name); const componentName = name // Убираем "./_" из начала имени файла .replace(/^\.\/_/, '') // Убираем расширение файла .replace(/\.\w+$/, '') // Разбиваем на части .split('-') // Делаем заглавные буквы .map((kebab) => kebab.charAt(0).toUpperCase() + kebab.slice(1)) // Объединяем всё .join('')})И теперь остаётся только зарегистрировать это всё глобально:
Vue.component(componentName, componentConfig.default || componentConfig)});В итоге файл _globals.js будет выглядеть вот так:
import Vue from Vue;const requiredComponents = require.context( '.', false, /_base-[\w-]+\.vue$/);requiredComponents.keys().forEach(name => { const componentConfig = requiredComponents(name); const componentName = name .replace(/^\.\/_/, '') .replace(/\.\w+$/, '') .split('-') .map((kebab) => kebab.charAt(0).toUpperCase() + kebab.slice(1)) .join('')});Vue.component(componentName, componentConfig.default || componentConfig)});Ну и для того, чтобы всё полетело, нужно в App.js добавить строчку:
import './components/_globals'И всё. Теперь в любом месте нашего приложения мы можем спокойно использовать базовые компоненты без необходимости их импортировать. И при создании нового базового компонента нам ничего не нужно делать. Он автоматически станет доступен глобально.