Onlook: курсор с открытым исходным кодом для фронтенд-дизайна, разработки и публикации кода в приложениях React

Общее введение

Onlook - это инструмент проектирования с открытым исходным кодом, созданный для дизайнеров и разработчиков, который позволяет пользователям создавать дизайн непосредственно в работающем приложении React и преобразовывать изменения дизайна в код. Инструмент предоставляет интуитивно понятный опыт визуального редактирования, подобный Figma или Webflow, но с акцентом на нативные манипуляции и бесшовную интеграцию кода.Onlook предназначен для оптимизации процесса проектирования и разработки проектов на фреймворках React и TailwindCSS. Он имеет активное сообщество разработчиков и постоянно обновляется для добавления новых функций и поддержки новых фреймворков.

Список функций

• Внесение изменений в конструкцию в режиме реального времени: Изменяйте пользовательский интерфейс вашего приложения React прямо в браузере, чтобы видеть результаты в реальном времени.
• переключение кодов: Трансляция изменений дизайна в соответствующий код и его непосредственное внедрение в кодовую базу.
• Поддержка нескольких фреймворковВ настоящее время поддерживаются : React и TailwindCSS, в будущем планируется расширить поддержку других фреймворков.
• локальная операцияВсе операции выполняются локально, обеспечивая безопасность и конфиденциальность данных.
• сообщество разработчиков открытого кода: Богатая поддержка и вклад сообщества, постоянные обновления и улучшения функций.

Использование помощи

Установите Onlook

1. Скачать Onlook::
   • Посетите страницу Onlook на GitHub.
   • Нажмите кнопку "Код" в правом верхнем углу и выберите "Скачать ZIP", чтобы загрузить исходный код, или напрямую клонируйте репозиторий локально:

     git clone https://github.com/onlook-dev/onlook.git
     

2. Настройка среды разработки::
   • Убедитесь, что у вас установлен Node.js (рекомендуется последняя стабильная версия).
   • Перейдите в клонированный каталог или извлеченную папку:

     cd onlook
     

   • Установите зависимость:

     npm install
     

   • Если есть.env.exampleПожалуйста, скопируйте и переименуйте.envВведите ключ API, если необходимо.
3. Начать просмотр::
   • Запустите сервер разработки:

     npm run dev
     

   • Это запустит Onlook, позволяющий просматривать и редактировать локально.

Проектирование с помощью Onlook

1. Запуск проекта React::
   • Убедитесь, что ваш проект React запущен локально (например, с помощьюnpm start).
2. Элементы конфигурации::
   • в вашемnext.config.mjsвозможноnext.config.jsДобавьте плагин Onlook в

     import path from "path";
     const nextConfig = {
     experimental: {
     swcPlugins: [
     ["@onlook/nextjs", { projectRoot: path.resolve(".") }]
     ]
     }
     };
     export default nextConfig;
     

   • Если вы используете другой фреймворк, обратитесь к документации Onlook за конкретными рекомендациями по настройке.
3. Редактирование с помощью Onlook::
   • Откройте приложение Onlook, и оно распознает и загрузит ваш проект React.
   • Вы можете редактировать пользовательский интерфейс, нажимая, перетаскивая и опуская его, как в Chrome Developer Tools.
   • С помощью контекстного меню выберите элемент, чтобы просмотреть или изменить его расположение кода.
4. Изменения в проводке::
   • После внесения изменений в дизайн нажмите кнопку "Опубликовать", и Onlook сгенерирует Pull Request для отправки измененного кода в ваш репозиторий GitHub.

Оперативные детали

• Иерархия навигации: Используйте панель "Слои", чтобы выбрать, скрыть или развернуть различные слои в проекте.
• Редактор стиляНастройте цвета, шрифты, макеты и т. д. и увидите изменения прямо в браузере.
• Эксплуатация компонентов: Возможность копирования, вставки, перемещения и удаления компонентов, поддержка операций мультивыбора.
• Поддержка горячих клавиш: Используйте CMD+Option, чтобы быстро переключиться в интерактивный режим для прокрутки страницы.

предостережение

• совместимость версий: Убедитесь, что ваша версия React соответствует версии, поддерживаемой Onlook.
• обновление: Регулярно проверяйте наличие обновлений Onlook для получения последних функций и исправлений.
• Участие в жизни общества: Присоединяйтесь к сообществу Onlook, чтобы участвовать в обсуждениях, сообщать о проблемах или вносить вклад в код.

Выполнив эти шаги, вы сможете свободно использовать Onlook для повышения производительности проектирования и разработки, создавать дизайн непосредственно в приложениях React и легко преобразовывать дизайн в поддерживаемый код.