Лучшие практики крупномасштабных проектов на Vue.js

Фреймворк на основе JavaScript, Vue.js, за последние несколько лет продемонстрировал огромный рост. Среди множества причин такого роста наиболее важными причинами являются простой пользовательский интерфейс, легкая интеграция, удобство использования и меньшее количество ограничений. Если вы используете Vue.js для проекта масштаба предприятия, вот рекомендации, которым вы должны следовать.

  1. Используйте Vue Slots
    Отношения родитель-потомок – это наиболее часто используемый метод, когда дело доходит до соединения ваших компонентов друг с другом. Однако в ситуациях, когда у вас есть большое количество дочерних компонентов в одном родительском компоненте, вы вынуждены использовать большое количество свойств и генерировать события.
    Vue Slots – лучшее решение в таких ситуациях. Слоты используются в Vue.js как альтернатива представлению родитель-ребенок отношений. Они в основном используются как выход для размещения контента в новых местах.

  2. Компонент Build & Share
    При создании компонента вы должны следовать принципу ПЕРВОГО. Также можно использовать такие инструменты, как Bit, для независимого управления версиями каждого компонента проекта и делиться им с центром компонентов Bit. Общие компоненты видны в концентраторе компонентов Bit с автоматически созданной документацией. Это упрощает поиск, использование и обслуживание компонентов.

  3. Поддержание хорошо организованного хранилища VUEX
    Паттерн управления состоянием, наблюдаемый в Vue.js, – это Vuex. Он используется как центральное хранилище для всех компонентов вашего приложения. Четыре основных компонента хранилища Vuex – это состояния, геттеры, мутации и действия. Если вы знакомы с этими четырьмя компонентами и следуете основным принципам, ваш проект может быть легко структурирован.

  4. Модульность хранилища VUEX
    Крупномасштабные проекты временами могут быть сложными. Вам нужно управлять своим магазином по-своему, чтобы не перегружать его. Не существует определенного способа разбивать модули, и некоторые разработчики разбивают их на модули в соответствии с функциями.

  5. Положитесь на помощников, чтобы упростить код.
    Давайте рассмотрим ситуацию, когда вам нужно получить доступ к этим состояниям, геттерам или где вам нужны действия вызова. В таких ситуациях вам не нужно создавать несколько вычисляемых свойств или методов. Можно даже использовать вспомогательные методы. Четыре помощника, которые вы можете использовать, включают mapState, mapGetters, mapMutations и mapActions.