Что это?
Vant — это лёгкая настраиваемая библиотека UI-компонентов Vue для мобильных веб-приложений: более 80 качественных компонентов, каждый в среднем около 1 КБ (min+gzip). Её развивает Youzan, лицензия — MIT.
Vant — это лёгкая настраиваемая библиотека UI-компонентов Vue для мобильных веб-приложений: более 80 качественных компонентов, каждый в среднем около 1 КБ (min+gzip). Её развивает Youzan, лицензия — MIT.Это фреймворк для целого приложения или библиотека компонентов?Это библиотека компонентов: вы подключаете её к своему Vue-проекту и импортируете только нужные компоненты — благодаря Tree Shaking неиспользуемые не попадут в итоговую сборку.
Это библиотека компонентов: вы подключаете её к своему Vue-проекту и импортируете только нужные компоненты — благодаря Tree Shaking неиспользуемые не попадут в итоговую сборку.Как добавить её в проект?Установите привычным пакетным менеджером — подойдут npm, yarn, pnpm и bun. Для нового проекта в README советуют использовать Rsbuild — инструмент сборки на основе Rspack от автора Vant, где Vant поддерживается в первую очередь.
Установите привычным пакетным менеджером — подойдут npm, yarn, pnpm и bun. Для нового проекта в README советуют использовать Rsbuild — инструмент сборки на основе Rspack от автора Vant, где Vant поддерживается в первую очередь.Она работает с Vue 3 или только со старыми версиями Vue?И с той, и с другой: Vant поддерживает Vue 2 и Vue 3, а также Nuxt 2/3 через специальный модуль Vant. У самой библиотеки нет ни одной сторонней зависимости.
И с той, и с другой: Vant поддерживает Vue 2 и Vue 3, а также Nuxt 2/3 через специальный модуль Vant. У самой библиотеки нет ни одной сторонней зависимости.Будет ли она работать на старых телефонах и в десктопных браузерах?Vant 3/4 ориентирована на современные браузеры — Chrome >= 51 и iOS >= 10, та же база, что у Vue 3 (Vant 2 поддерживала вплоть до Android 4.0 и iOS 8). Компоненты рассчитаны в первую очередь на сенсорный ввод, поэтому на десктопе нужно добавить пакет vant-touch-emulator.
Vant 3/4 ориентирована на современные браузеры — Chrome >= 51 и iOS >= 10, та же база, что у Vue 3 (Vant 2 поддерживала вплоть до Android 4.0 и iOS 8). Компоненты рассчитаны в первую очередь на сенсорный ввод, поэтому на десктопе нужно добавить пакет vant-touch-emulator.Где будут работать приложения на её основе?В браузере — в любом современном мобильном браузере, а на десктопе через эмулятор касаний; подключается через npm в веб-проекте.
В браузере — в любом современном мобильном браузере, а на десктопе через эмулятор касаний; подключается через npm в веб-проекте.Под какой лицензией она распространяется?MIT — свободная лицензия, можно спокойно использовать в коммерческих продуктах.
MIT — свободная лицензия, можно спокойно использовать в коммерческих продуктах.Что идёт из коробки, кроме самих компонентов?Кастомные темы и тёмный режим, поддержка SSR, доступность (a11y, пока в развитии) и i18n с более чем 30 встроенными языками. Есть также ресурсы для дизайна в Sketch и Axure — пригодятся, если вы рисуете макеты экранов до написания кода.
Кастомные темы и тёмный режим, поддержка SSR, доступность (a11y, пока в развитии) и i18n с более чем 30 встроенными языками. Есть также ресурсы для дизайна в Sketch и Axure — пригодятся, если вы рисуете макеты экранов до написания кода.Насколько она утяжелит мою мобильную страницу?Компонент в среднем весит около 1 КБ в min+gzip — лёгкость здесь одна из главных особенностей библиотеки, а покрытие кода юнит-тестами превышает 90%.
Компонент в среднем весит около 1 КБ в min+gzip — лёгкость здесь одна из главных особенностей библиотеки, а покрытие кода юнит-тестами превышает 90%.Я использую React — есть ли здесь что-то для меня?Официальная библиотека только для Vue, но в экосистеме перечислены порты для React от сообщества: react-vant, @antmjs/vantui (с поддержкой Taro) и Taroify. Есть ещё vant-weapp — версия для WeChat MiniProgram.
Официальная библиотека только для Vue, но в экосистеме перечислены порты для React от сообщества: react-vant, @antmjs/vantui (с поддержкой Taro) и Taroify. Есть ещё vant-weapp — версия для WeChat MiniProgram.Можно опробовать компоненты, прежде чем встраивать их в приложение?Да — в экосистеме есть Vant Playground для экспериментов прямо в браузере, в README дана ссылка на демо, которое можно открыть, отсканировав QR-код, а расширение для VS Code добавляет подсказки Vant прямо во время написания кода.
Да — в экосистеме есть Vant Playground для экспериментов прямо в браузере, в README дана ссылка на демо, которое можно открыть, отсканировав QR-код, а расширение для VS Code добавляет подсказки Vant прямо во время написания кода.What are similar projects?vuestic-admin, iview, mint-ui, vux, shadcn-vue, primitives, element-plus, react-native-ui-kitten
vuestic-admin, iview, mint-ui, vux, shadcn-vue, primitives, element-plus, react-native-ui-kittenWhich topics is it in?mobile-web, nuxt, vue2, ui-kit, vue3, components, ssr, ui-library, dark-mode, mobile-development, accessibility, component-library
mobile-web, nuxt, vue2, ui-kit, vue3, components, ssr, ui-library, dark-mode, mobile-development, accessibility, component-library