Выпущен Vant 1.0: легкая и надежная библиотека мобильных компонентов Vue

внешний интерфейс GitHub Vue.js Открытый исходный код Vant
Выпущен Vant 1.0: легкая и надежная библиотека мобильных компонентов Vue

VANT - это библиотека мобильной VUE компонент, поддерживаемой командой Front-End Youzan, обеспечивая полный набор базовых компонентов UI Basic и компоненты бизнеса. Через Vant вы можете быстро построить страницу с единым стилем и повысить эффективность развития.

Vant

1. Около 1,0

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

На данный момент мы решили выпустить официальную версию 1.0 Vant и надеемся, что больше друзей смогут участвовать в разработке и использовании Vant в будущем.

Адрес гитхаба:github.com/youzan/vant

2. Существующие компоненты

3. Концепция развития

Легкий

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

После применения ряда методов оптимизации текущийVantСредний размер компонентов составляет всего 8,8 КБ, а после Uglify + Gzip — около 1 КБ. В качестве сравнения,mint-uiСредний размер компонентов составляет 15,2 КБ, а средний размер компонентов некоторых библиотек компонентов даже превышает 25 КБ.

VantПричина, по которой мы можем поддерживать такой небольшой размер компонента, в основном связана с нашим уникальным методом компиляции компонентов. Текущий основной метод компиляции компонентов заключается в компиляции каждого компонента через webpack и vue-loader и создании упакованного JS-файла для каждого компонента. Этот подход будет генерировать много избыточного кода, такого как встроенный модульный код webpack, встроенная функция нормализации vue-loader, неоднократно вводимый помощник babel и т. д., и мы не хотим вводить эти избыточные коды в результате компиляции компонента.

Сначала мы пытались решить вышеописанные проблемы с помощью rollup и rollup-plugin-vue, но вскоре нашли более прямой путь, то есть компилировать компоненты через официальный vue-template-compiler и babel, так что этот метод простой и чистый, и скомпилированный код очень чистый.Подробности здесь не повторяются.Заинтересованные студенты могут посмотреть на Vant.Исходный код сборочной части.

Итерация быстро

Другой очень важной концепцией является быстрая итерация. Десятки инженеров из фронтенд-команды Youzan используют версию на GitHub, которую вы видите сейчас, и у нас нет так называемой «внутренней версии». В то же время, дорожа собственной репутацией, мы не просто открываем исходный код, но поддерживаем его как технический продукт не только для собственного использования, но и для использования другими, поэтому мы сохраним его. Быстрый ответ на потребности сообщества, своевременные последующие действия и исправления ошибок.

На данный момент общее количество проектных коммитов превысило 1600, решено 300 проблем, объединено 400 пулл-реквестов и выпущено 90 релизов, в основном поддерживая ритм релизов 1-2 раза в неделю. Это включает в себя вклад многих разработчиков сообщества, спасибо им за их поддержкуVantВклад ~ В будущем мы продолжим поддерживать этот ритм разработки и выпускать более качественные продукты с открытым исходным кодом для сообщества.

Экологический

В дополнение к поставке компонентов, мы также предоставляемVantМы предприняли множество попыток разработать экосистему, надеясь покрыть потребности разработки различных сценариев и обеспечить удобство для всех. Вот некоторые из наших существующих экосистем или возможностей:

  • Скаффолдинг на основе vue-clivue-cli-template-vant
  • служба поддержкиnuxtРендеринг на стороне сервера
  • служба поддержкиTypescriptОпределение типа
  • служба поддержкиi18nМногоязычная настройка
  • поддержка черезpostcssПлагины для настройки темы
  • Официальный демонстрационный склад -vant-demo
  • Библиотека компонентов апплета, основанная на той же визуальной спецификации -zanui-weapp
  • Пример проекта мобильного магазина сообщества с открытым исходным кодом -vant--mobile-mall

Что касается экологизации, у нас еще есть много аспектов, которые необходимо доработать, например, обеспечение поддержки rem, подключаемых модулей подсказок кода vscode и т. д. Это будет направление, которое мы попробуем в 2018 году.

Четвертый, последний

Прогресс проектов с открытым исходным кодом неотделим от вклада сообщества.VantВсем, кто делал пиары и комментарии, особая благодарность сообществу@chuangbo,@qianzhaoyan,@GeoffZhuРавный вклад одноклассников. Надеюсь, в будущем к нам присоединится больше студентовVantнаходится в разработке. Если вы заинтересованы в похвале передовой команды, вы можете присоединиться к нам и играть вместе ~
Электронная почта для доставки резюме: chenjiahan@youzan.com ^_^

Эта статья была впервые опубликована вБлог о технологиях Youzan.