Архитектура приложения Vue.js, ориентированная на повторное использование и масштабируемость

Question

Я работаю над приложением, которое уже создано для одной страны. Теперь требуется масштабировать его на несколько стран (20+) с небольшими изменениями в каждом компоненте. Как реализовать код для повторного использования и масштабирования, как я думал:

• Новый репо (Независимые выпуски, повторное использование кода не возможно, но легко масштабируется)
• Новая папка для каждой страны, новые файлы только при наличии изменений (независимо, мало повторяющийся код, выглядит масштабируемым)
• Использование v-if для div для принятия решения о показе или нет (зависимые выпуски, возможность многократного использования, но сложная масштабируемость, делающая код грязным)

Структура приложения / Код: есть форма, поля и валидации которой будут меняться в зависимости от страны. Плюс несколько баннеров, расположение баннеров которых зависит от страны.

Хотите знать, как мы можем создать такое приложение Vue.js?

Answer 1

Вместо использования v-ifs я бы делегировал эту логику пользовательскому компоненту:

Вместо:

<h2>Country Specific</h2>
<v-if="country=='A'>
<v-if="country=='B'>
<v-if="country=='C'>
etc...

Сделайте это:

<h2>Country Specific</h2>
<custom-module country="currentCountry"/>

и сгруппируйте все эти модули "для каждой страны" в определенную папку отдельно от вашей "глобальной / общей" системы.

Answer 2

Трудно понять, не видя весь код, но если вы уже используете i18n для изменения языковых строк, и изменения действительно незначительны, я думаю, v-ifs - ваш лучший выбор.