Вот краткийПередняя система знанийЖдем, когда вы проверите, посмотрите, будут сюрпризы~ Если вы думаете, что это хорошо, пожалуйста, поставьте звезду~
введение
Детская обувь с опытом разработки проектов должна знать, что при запуске нового проекта вы не начинаете набирать код, когда подходите, а должен быть обычный процесс.
Предположим, вы сейчас делаете реактивный проект, какие важные среды необходимо учитывать?
Я думаю, что следует учитывать четыре аспекта: инженерную структуру, структуру проекта, развитие бизнеса, совместную отладку, производство и запуск ~
Инженерная архитектура
Чтобы настроить проект, который может работать, в настоящее время он неотделим от webpack.
Webpack может помочь нам сделать многое, например, как скомпилировать файлы jsx, как обрабатывать статические файлы, такие как изображения, как упаковывать, как выполнять оптимизацию внешнего интерфейса и так далее.
С развитием webAPP появляется все больше и больше одностраничных приложений, а рендеринг на стороне сервера все больше ценится разработчиками интерфейсов, и веб-пакет также может помочь нам добиться рендеринга на стороне сервера.
Инженерная архитектура преследует три цели, а именно:
- Освободите производительность Мы надеемся, что в процессе разработки мы сможем сосредоточиться на бизнес-коде и не будем рассматривать другие повторяющиеся операции, такие как:
- предварительная обработка исходного кода
- Автоматическая упаковка, автоматическое отображение страницы обновления
- Автоматически обрабатывать зависимости образов, чтобы обеспечить единство среды разработки и формальных сред.
- Создайте среду вокруг решения Режимы разработки таких фреймворков, как react, vue и angular, отличаются друг от друга. React — это файл jsx, vue — это файл .vue, angular разработан с использованием ts и т. д. Браузеры не могут напрямую анализировать jsx, .vue и т. д., нам нужен процесс компиляции. Итак, моменты, на которые мы должны обратить внимание:
- Разные интерфейсные фреймворки требуют разных операционных архитектур.
- Предвидеть возможные проблемы и избегать их, например, использовать sass, чтобы избежать проблем с написанием CSS после того, как проект станет больше в будущем и т. д.
- Гарантия качества проекта Есть две основные функции: одна — обеспечить одинаковый стиль, который способствует лучшему пониманию членами команды, а другая — облегчить отладку кода. Распространенные схемы:
- code lint
- git коммит предварительной обработки
Архитектура проекта
После сборки проекта нам нужно построить структуру проекта.
При построении проекта учитывается возможность выполнения проектов и удобство их разработки, а при архитектуре проекта учитывается многослойность проекта, лучшее программирование и лучшая масштабируемость.
Моменты, которые следует учитывать в архитектуре проекта, включают:
- Выбор технологии: если мы работаем над реактивным проектом, нам нужно настроить маршрутизацию и хранилище данных. Маршрутизацию данных мы можем сделать с помощью реактивного маршрутизатора без сомнения. Для части хранилища данных (хранилища) мы можем рассмотреть возможность использования Redux или Mobx, восходящей звезды. Mobx проще и эффективнее, чем redux.
- общий стиль кода
развитие бизнеса
Как только структура проекта настроена, вы действительно можете начать развивать бизнес.
Совместная пуско-наладка и запуск производства
Поскольку эта статья предназначена для фронтенд-проектов, в ней не будет слишком много внимания разработке бэкенда.
После того, как интерфейсный бизнес-код разработан, его можно совместно отладить с серверной частью детской обуви, передать группе тестирования для тестирования и, наконец, запустить в производство и запустить ~
наконец
Эта статья относительно проста, просто некоторые из моих собственных мыслей. Если у вас есть что добавить, пожалуйста, оставьте сообщение и дайте мне знать, спасибо~