Интерфейс колеса
Wheel UI — это другая структура пользовательского интерфейса.
Эта структура пользовательского интерфейса представляет собой структуру, «ориентированную на чтение исходного кода». Если это поможет вам, пожалуйста, не жалейте свою звезду.
Другими словами, цель создания этого фреймворка — дать новичкам возможность научиться делать колеса. Весь код стремится к удобочитаемости.
- Вы можете изучить производственные идеи этого фреймворка, просматривая коммиты один за другим.
- тоже через менязаписанное видеоУчиться （抱歉，由于制作非常耗时，所以视频是收费的。不过项目搭建过程的录屏是бесплатноДа, эти несколько видео помогут вам быстро начать этот проект с нуля. )
Если вы хотите начать с первого коммита, нажмитездесь.
Если у вас есть вопросы по коду, добро пожаловатьподнимать вопрос, отвечу на ваши вопросы. Вы также можете присоединиться к групповой консультации в конце этой статьи.
Эта структура пользовательского интерфейса реализована на основе Vue 2.
Примечание. Код этой структуры пользовательского интерфейса еще не полностью завершен (в настоящее время код готов примерно на 50 %), пожалуйста, не используйте эту структуру пользовательского интерфейса в производственной среде.
чему ты можешь научиться
- Инженерные концепции, такие как модульное тестирование, покрытие, непрерывная интеграция и т. д.
- Рефакторинг, TDD/BDD, шаблоны проектирования, однонаправленный поток данных и другие технические концепции
- Почти все функции Vue, и нужно понимать их глубоко, а не поверхностно.
какие колеса
- Простые колеса: кнопки, входы, сетки, макеты, тосты, вкладки, всплывающие окна, аккордеоны (код завершен)
- Расширенные колеса: каскадный выбор, бесшовная карусель, адаптивная панель навигации, разбивка на страницы, проверка формы, таблица, загрузка изображения, прикрепление, дерево, предложение, средство выбора даты (код не завершен)
- Прочее: маршрутизация, управление состоянием (код не завершен)
Примечание. Это только текущий план, колесо, которое необходимо завершить, может отличаться от приведенного выше.
Особенности проекта
- Непрерывная интеграция с Travis CI
- Существует множество юнит-тестов, и когда проект будет завершен, ожидается, что покрытие тестами превысит 90%.
- Не требующий пояснений код, который вы можете понять даже без комментариев
- Вначале я использовал сборку пакетов, чтобы новичкам было легче начать работу, а позже перешел на Vue Cli 3 для большего количества функций.
задний план
Я опубликовал несколько лет назадГлупый способ изучить интерфейс" статья, В то время я чувствовал, что хотя в сообществе с открытым исходным кодом было много хороших библиотек, эти библиотеки были в основном практичными, и их исходный код не подходил дляновичокчитать.
Поэтому в свободное время я сделал несколько колес с нативным JS и выложил их на GitHub. Я не ожидал, что за ними последуют сотни людей. Надеюсь, я смогу опубликовать более подробные уроки.
Но у меня не было времени, чтобы сделать более подробный урок в то время.
Теперь я, наконец... все еще занят, но я решил использовать каждую субботу и воскресенье для записи видео "Building Wheels".
На этот раз, чтобы следовать тенденции фронтенда, я напрямую использую Vue 2 для создания колеса. Если вы изучаете Vue 2, вам будет очень удобно читать исходный код пользовательского интерфейса колеса.
Визуальный проект
Этот UI-фреймворк заимствует внешний вид некоторых зрелых UI-фреймворков (таких как Framework7, Element UI и Ant Design), и после его упрощения я сделал его сам.Визуальный проект.
Если вы обнаружите какие-либо недостатки в визуальном проекте, вы можете оставить сообщение прямо на нем, и я тоже это увижу.
Почему он называется Kulu UI?
Потому что катушка означает «колесо».