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

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

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

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

  1. Поместите свой сервер в совершенно отдельное репо
  2. Создайте репозиторий для своего сервера и поместите скаффолд Vue CLI 3 в подпапку.
  3. Создайте «универсальную» структуру, изменив скаффолд Vue CLI 3, чтобы поделиться им с вашим сервером.
  4. Сделайте вывод, что нецелесообразно использовать 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 без настройки.


Хотите узнать, как создавать полностью протестированные, готовые к работе приложения Vue, подходящие для коммерческих целей? Присоединяйтесь к предпродаже моего предстоящего Корпоративный вид курс!


Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *