Полнофункциональная структура приложения Vue CLI 3

Если вы создаете приложение с помощью Vue.js, вы, скорее всего, захотите использовать передовые методы создания шаблонов, предоставляемые Vue CLI 3.

Но если приложение Vue является клиентским уровнем полнофункционального приложения JavaScript, например, в конфигурации «MEVN» (Mongo, Express, Vue, Node), не совсем понятно, как Vue CLI 3 следует интегрировать в такое приложение. структура.

Есть несколько подходов, которые вы могли бы разумно использовать:

Поместите свой сервер в совершенно отдельное репо
Создайте репозиторий для своего сервера и поместите скаффолд Vue CLI 3 в подпапку.
Создайте «универсальную» структуру, изменив скаффолд Vue CLI 3, чтобы поделиться им с вашим сервером.
Сделайте вывод, что нецелесообразно использовать Vue CLI 3 для структуры с полным стеком, и сверните свою собственную конфигурацию.

Сложность выбора одного из этих вариантов заключается в том, что каждый из них имеет свои плюсы и минусы, когда речь идет о балансе лучших практик, удобства обслуживания, простоты использования, простоты тестирования и развертывания и т. д.

Этот выбор представлял для меня особый интерес, поскольку я думал о наилучшем подходе к моему Корпоративный вид курс, который сосредоточен вокруг создания приложения MEVN. Я надеялся, что можно будет создать это приложение и при этом использовать преимущества Vue CLI 3.

Ссылаясь на авторитет и опыт

Насколько мне известно, нет «официального» примера Vue CLI 3 в конфигурации с полным стеком, и я полагаю, что вряд ли когда-либо будет.

Но мы можем посмотреть, как другие фреймворки JavaScipt решили эту проблему.

Популярный и уважаемый шаблон приложения с полным стеком описан на среднее.ио для полнофункционального приложения Angular.

Этот шаблон и фактически почти все шаблоны JavaScript с полным стеком, которые я смог найти, используют универсальный подход, который я упомянул, когда и клиент, и сервер используют один и тот же каталог, что дает вам такую структуру:

- client
  - components
    ...
  main.js
- server
  - routes
    ...
  index.js
  ...
package.json
...

Интересно, что шаблонный код mean.io также включает в себя Angular CLI.

Плюсы и минусы универсальной структуры папок

Глядя на примеры из дикой природы, кажется, что этот подход является наиболее популярным способом структурирования JS-приложения с полным стеком.

Некоторые из преимуществ, которые я вижу:

Это эффективно, так как позволяет делиться package.json, node_modulesпеременные окружения и открывает возможность общего кода между клиентом и сервером.
Это упрощает установку и развертывание, поскольку одна команда в package.json может использоваться для установки/развертывания всего приложения.
Это легко читать и понимать.

Недостаток заключается в том, что если вы хотите использовать эту структуру приложения с Vue CLI 3, вам потребуется изменить скаффолд, что не лишено недостатков.

Размещение сервера в каркасе Vue CLI 3

Vue CLI 3 не был разработан для того, чтобы делить свое пространство с сервером. Пойдя по этому пути, вы столкнетесь с некоторыми проблемами:

Ему не нравится, что вы меняете структуру файла. Например, src папка не может быть легко переименована.
Он захватывает .env файл и важные переменные среды, такие как PORT, которые обычно зарезервированы для сервера.
Некоторые готовые конфигурации, такие как ESLint, не подходят для серверных файлов, поэтому вам придется обновлять их вручную.

Однако ни одна из этих проблем не является непреодолимой, и если вы сможете справиться с ними, у вас будет чистая, поддерживаемая структура папок с лучшими практиками и преимуществами Vue CLI 3 без настройки.