Vant — это набор легких и надежных библиотек мобильных компонентов с открытым исходным кодом, открытый командой фронтенда Youzan.
После восьми месяцев разработки Vant 3.0 наконец-то официально познакомился с вами. В этой итерации наша основная работаРефакторинг всего репозитория кода и окружающей среды на основе Vue 3.и выпустили Vant 3.0, Vant Cli 3.0 и Vant Use 1.0.
рассмотрение
Как обычно, давайте кратко рассмотрим достижения Vant с открытым исходным кодом на данный момент:
- 270 разработчиковУчаствовал в разработке Vant и VantWeapp и отправил 4100 запросов на слияние.
- 7300 выпусковЗакрыто, 99,3% вопросов решены или даны ответы
- ежемесячные посещения сайта8 миллионов раз
- Ежемесячные загрузки CDN300 миллионов раз
обновить содержимое
Vant 3.0: полное использование Vue 3 💪
Vue 3 предлагает множество интересных новых функций, таких как Composition API, Option и Teleport. В Vant 3.0 мы полностью приняли изменения, внесенные Vue 3, выполнив следующие преобразования:
- Рефакторинг всех компонентов с помощью Composition API
- Переписать всю документацию и примеры с помощью Composition API
- Компонент добавляет опцию отправки, чтобы обеспечить лучшие подсказки о событиях.
- Удалите все примеси, чтобы улучшить читаемость кода.
- Все всплывающие компоненты поддерживают атрибут телепортации
После завершения рефакторинга компоненты можно логически повторно использовать на основе Composition API, а также улучшается сжимаемость кода. По сравнению с версией Vant 2.12 вы можете увидеть объем JS Vant 3.0.вниз на 16,6%, размер уменьшен до 67,5кб после Gzip.
Новые компоненты: Vant 2, Vant 3 Simultaneous Provisioning
Vant 3.0 включает в себя 3 совершенно новых компонента, а именно:
- Логотип значка: Используется для отображения номера логотипа или маленькой красной точки в правом верхнем углу.
- Трещать: Компонент всплывающего всплывающего меню.
- Каскадный селектор каскада: Используется для выбора многоуровневых данных, типичным сценарием является выбор провинций и городов.
Учитывая, что большинство разработчиков все еще используют Vue 2 для разработки, мы в Vant 2Вышеупомянутые три компонента реализованы синхронно, вы можете перейти на версию Vant 2.12 для использования.
Вант Использование: Новый партнер 👬
Vant UseБиблиотека API композиций, осажденная из Vant. В дополнение к предоставлению общих API-интерфейсов Composition, Vant Use также извлекает логику некоторых компонентов, позволяя разработчикам полностью настраивать представление компонентов при использовании логики компонентов.
Ниже приведен простой пример, мы абстрагируем логику обратного отсчета компонента CountDown какuseCountDownМетод и функция в основном эквивалентны компоненту CountDown, но более гибки в использовании.Мы можем настроить стиль пользовательского интерфейса обратного отсчета или передатьcomputedПредварительно обработайте обратный отсчет.
Использование Vant все еще находится на ранней стадии, и в будущем процессе эволюции мы продолжим извлекать общую логику внутри компонентов Vant и углубляться в использование Vant.
Vant Cli 3.0: новее, быстрее 🚀
Vant CliЭто базовый инструмент построения библиотеки компонентов Vant.Через Vant Cli вы можете быстро создать полный набор библиотеки компонентов Vue. В Vant Cli 3.0 мыОбновление основной версии для всех базовых зависимостей, который обеспечивает более плавную разработку при поддержке Vue 3.
- Обновите Vue3, Vue Router4, Vue Loader 16
- Обновите Webpack 5, чтобы включить постоянное кэширование
- Обновление Docsearch 3, новый стиль окна поиска
- Обновление TypeScript 4, ESLint 7
при созданииvant-cliПри разработке вы можете свободно выбирать библиотеки компонентов на основе Vue 2 или Vue 3:
Vant Demo: 2 новых примера проектов
Vant DemoЭто набор примеров проектов, официально предоставленных Vant. В этой итерации мы добавили 2 новых примера проектов для демонстрации:
- как использоватьVue 3 + Vant 3 + Vue CliСоздайте приложение
- как использоватьVue 3 + Vant 3 + ViteСоздайте приложение
Многие мелкие партнеры, которым нравятся ранние пользователи, уже используют Vite для разработки.В процессе использования Vite одна вещь, которая часто всех смущает, — это как внедрять компоненты Vant по запросу в Vite. В Vue Cli мы можем импортировать по запросу через плагин babel-plugin-import, но этот плагин недоступен в Vite.
На самом деле нет необходимости рассматривать проблему внедрения по требованию в Vite. Когда Vite создает код, он автоматически проходитTree ShakingУдалите неиспользуемые модули ESM. Все модули в Vant 3.0 написаны на основе ESM и, естественно, могут быть введены по запросу. Оставшаяся проблема на данном этапе заключается в том, что неиспользуемые стили компонентов не могут быть распознаны и удалены Tree Shaking, и мы рассмотрим возможность их поддержки с помощью плагинов Vite в будущем.
начать
В настоящее время на официальном сайте Vant по умолчанию отображается документация по API Vant 2.Кнопка переключения версийПосетите документацию Vant 3 или 👉Нажмите здесь, чтобы посетить.
В то же время последний тег Vant npm также сохраняется в версии v2, что означает использованиеnpm install vantкоманда по-прежнему установит Vant 2, тогда как для установки Vant 3 требуется использованиеnpm install vant@nextЗаказ. После того, как версия документации Vue по умолчанию и теги npm будут переключены на v3, мы также переключимся синхронно.
Чтобы обновить существующий проект Vant 2, см.🚀 Руководство по обновлению.
следующие шаги
В течение следующих 6–12 месяцев мы будем синхронизировать функции Vant 2 и Vant 3. С ростом популярности Vue 3 мы будем постепенно сокращать частоту обслуживания Vant 2 и смещать фокус работы на Vant 3.
Кроме того, в дополнение к официально поддерживаемой версии Vue и версии апплета WeChat, Vant также инициируется и поддерживается друзьями сообщества.Реакт версияа такжеВерсия апплета Alipay, приглашаем всех принять участие в строительстве 💪
Необыкновенный 2020 год подходит к концу. Я надеюсь, что Вант сможет немного помочь всем в работе. Увидимся в следующем году.