Пример подключения Ant Design Vue к проекту и компоненту

Подключение Ant Design Vue к проекту

Давайте попробуем подключить библиотеку Ant Design Vue к нашему проекту, который развёрнут на примере Vue CLI. У меня это проект, который я развернул с помощью утилиты Vue CLI, и мы попробуем сейчас установить в него поддержку Ant Design.

Для того чтобы это сделать, нам нужно открыть документацию на сайте antdv.com. Переходим в раздел документации и входим в раздел Get Started. Здесь есть инструкция по установке этой библиотеки. Если у вас ещё не установлена утилита Vue CLI, вы можете её скачать — здесь есть инструкция, как это сделать, и создать с помощью неё новый проект.

Далее в этот проект мы устанавливаем саму библиотеку. Открываем проект и выполняем команду npm install, устанавливая библиотеку Ant Design Vue соответствующей версии, которая будет актуальна на момент установки. Обязательно переходите в раздел документации и смотрите свежие версии и инструкцию по установке, которая существует на текущий момент.

Далее нам потребуется файл main.ts или main.js, в зависимости от того, как вы установили проект — с поддержкой TypeScript либо без. У меня проект установлен с поддержкой TypeScript, поэтому я открываю файл main.ts. Нам нужно скопировать часть кода для подключения библиотеки. Я скопировал и вставил конструкцию импорта. Далее нам нужно перенести в константу app результат выполнения функции createApp и выполнить конструкцию app.use(Antd), точно так же, как это указано в документации. Мы указали эту конструкцию и импортируем с помощью use нашу библиотеку Ant Design в проект.

Работа с компонентами

Теперь нам потребуется перейти в раздел Components. В этом разделе идёт перечисление всех компонентов, которые есть в этой библиотеке и которые мы можем использовать.

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

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

Для этого мы импортируем не весь Ant Design, а только нужный компонент. Допустим, мы хотим импортировать только кнопку — пишем Button и используем с помощью use эту кнопку. В документации это раздел Local Registration: импортируем Button и подключаем его через app.use(Button). Обновляем страницу и видим, что кнопка продолжает работать.

Кроме того, что мы можем глобально подключать компоненты, мы можем подключать их и локально — в конкретном компоненте. Для этого в документации приводится пример: импортируем нужный компонент и в секции components указываем его. Обратите внимание, что имя компонента начинается на A — например, AButton. Если мы используем формат a-button, то кнопка будет подключаться через дефис, что обеспечивает единообразие наименования компонентов, поскольку в документации все компоненты указываются в формате a-имя-компонента.

Таким образом можно локально регистрировать компоненты Ant Design. Это достаточно просто, и теперь давайте знакомиться с этой библиотекой и тем, как ей можно пользоваться.